Archived topic

Adaptions for Mobile Site

4 replies · Started by Cassandra Teo on December 30, 2014

Viewing posts 1–5 of 5

December 30, 2014 at 12:00 am #59437

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?

December 30, 2014 at 10:13 am #59622

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?

January 1, 2015 at 10:08 pm #60707

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.

January 1, 2015 at 10:09 pm #60708

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

January 3, 2015 at 10:13 am #61209

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/

This archived topic is closed to new replies.

Start building better websites today.