[Resolved] Adaptions for Mobile Site

[Cassandra Teo]

Hi there,

I am trying to modify my site so that it works with the responsive layout. However, the header image does not appear completely when viewed using a mobile. The images on the ‘About Us‘ and ‘Services‘ pages tend to move and disrupt the flow as well. The images on the two pages were placed using custom CSS:

.floatLeft {
float: left;
width: 580px;
margin-right: 20px;
}

.floatRight {
float: right;
padding: 10px;
}

Additionally, the footer widgets don’t fit into the grey footer box as well on a mobile site.

Any suggestions as to how I will be able to modify my site?

[Tom]

Hi there,

Any particular reason for this code?

.header-image {
    margin-left: -400px;
    margin-top: -50px;
    max-width: 800px;
    position: absolute;
    z-index: -1;
}

That’s what is causing the issue with the header on mobile.

In your floatLeft class – replace “width” with “max-width”. That should make it responsive.

Not sure what’s going on with the footer widgets – have you added any custom CSS to them?

[Cassandra Teo]

Thank you re: header.

I’ve replaced width with max-width but the images and words on the ‘Services’ page is out of line now on a wide screen.

[Cassandra Teo]

The css for the header-image was to position it and to remove the extra padding.

[Tom]

Hmm, well you’re adding a float: left attribute to every line of text, which isn’t exactly how it’s supposed to be used.

Instead, try using the built in grid system:

<div class="grid-70">
Content in here
</div>
<div class="grid-30">
Image in here
</div>

More info here: http://unsemantic.com/

[Author]

Posts