Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Adaptions for Mobile Site

Home Forums Support Adaptions for Mobile Site

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #59437
    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?

    #59622
    Tom
    Lead Developer
    Lead Developer

    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?

    #60707
    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.

    #60708
    Cassandra Teo

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

    #61209
    Tom
    Lead Developer
    Lead Developer

    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/

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.