htmlcssmobile

Auto layout for a web site

I'm facing with the following issue: I've just finished the implementation of my web site, but something is wrong with the UI layout when I access it using the mobile phone. How can the auto layout be done (or be adjusted) if the website will be accessed from a mobile phone?

   <div id="owl-hero" class="owl-carousel owl-theme">
            <div class="item" style="background-image: url(img/venice1.jpg);">
                <div class="caption">
                </div>
            </div>
           <div class="item" style="background-image: url(img/venice2.jpg)">
                <div class="caption">
                </div>
            </div>
        </div>

On the PC it looks like this:

enter image description here

On the mobile phone, it looks like this (even the menu looks weird):

enter image description here

Solution

  • Without the code it is a divination...

    If you're using background-image you can set background-size: cover or background-size: contain.