Search code examples
csshtmlmobilehtml5boilerplate

Issue with fluid-fixed layout on mobile browsers

I'm having issues getting my website to work correctly on mobile and desktop browsers.

I have a layout formatted like this:

<body>
    <div id="div1"><div class="container"></div></div>
    <div id="div2"><div class="container"></div></div>
    <div id="div3"><div class="container"></div></div>
</body>

Each of the div1, div2, and div3 have solid background colors and I want them to stretch to match the width of the browser, inside each of them I have a div with class "container" which has the attribute of width: 1000px;

I want all the content to be a width of 1000px but I want to the colored divs to stretch to match the width of the browser.

This works fine on desktop but I am running into issues on mobile. I am using HTML5 Boilierplate

you can see the issue if you pull up this link on a mobile device and compare it to opening it on desktop.: http://svth.azurewebsites.net/

Solution

  • It sounds like you're trying to create a responsive design for your page. If this is the case there are a few things you should do to help you along this process. There are several really good web resources to help you with this.

    Example 1 Example 3 Example 2

    There is a lot to digest but it pretty much boils down to two things.

    1. keep your page flexible, all widths in either % or ems. So use width:80% instead of width: 1000px

    2. Use media queries to change your CSS for different screen sizes. In this case something for mobile sized screens.