Support » Themes and Templates » Issue with header and footer on mobile

  • I am running the Sommerce theme on WordPress. I have modified it significantly from the original.

    My header and footer background images show up great on any desktop browser (IE 7 and up) but the images are cut off severely when I view it in mobile Safari.

    Here is the site:
    http://recycledseatbelts.ca/

    Is there some css that needs to be different for mobile?

Viewing 8 replies - 1 through 8 (of 8 total)
  • popper

    (@julialasarte)

    Do you have a screenshot of the way it looks on mobile safari?

    Thread Starter rksystems

    (@rksystems)

    popper

    (@julialasarte)

    mhm, it probably has to do with the absolute width’s -on the slider, for example-.

    Thread Starter rksystems

    (@rksystems)

    I haven’t specified any width on the header or footer. And it seems as though the very bottom div on the footer works fine.

    popper

    (@julialasarte)

    No, but check out the slider:

    <div class="lof-slidecontent" id="lofslidecontent45" style="border:3px solid #ccc;width:1000px;height:310px;">

    It doesn’t scale at all.

    Thread Starter rksystems

    (@rksystems)

    The slider looks just fine on mobile. Not sure how that would effect the header/footer. What do you suggest I change the code to for testing?

    popper

    (@julialasarte)

    Sorry! In the screenshot it looked as if the slider was messed. But! You have set absolute widths in header and footer. In header, look in the class .inner and for the footer, in #footertext both have the width set in pixels. 🙂

    Thread Starter rksystems

    (@rksystems)

    I tried changing it but actually the #footertext is the div right at the bottom that works fine on mobile. The divs that are having issues are #linksbar #headerwrap #header #footerextend (although there may be some parent divs involved as well)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Issue with header and footer on mobile’ is closed to new replies.