search

themesberg / neumorphism-ui-bootstrap

Neumorphism inspired UI Kit: web components, sections and pages in neumorphic style built with Bootstrap CSS Framework
https://themesberg.com/docs/neumorphism-ui/getting-started/quick-start/
MIT License
843 stars 130 forks source link

Responsive Image of "organic-radius img-fluid" scaled Too Big On Mobile but hard to fix #43

Open realliyifei opened 11 months ago

realliyifei commented 11 months ago

I set the responsive image on the left hand side of a section:

<section class="section section-lg pt-7">
            <div class="container">
                <div class="row align-items-center justify-content-around">
                    <div class="col-md-3 col-xl-3 mb-4">
                        <div class="card bg-primary shadow-soft border-light organic-radius p-3">
                            <img class="organic-radius img-fluid" src="../../assets/img/xxx.jpeg" alt="younger me">
                        </div>
                    </div>
                    <div class="col-md-5 col-xl-5 text-center”>
                      ...
                    </div>
                </div>
            </div>
        </section>

and when it is scaled as small as on the mobile screen, the image would become very huge.

I tried to used some general html methods to fix it, such as set max length in style and image but then the display will get very weird, since the image frame and the image will be in a different shape. I tried to adjust the number after "col-sm, col-md, col-lg, col-xl” but also failed.

What is the best way to fix this issue?