Pages Not Displaying Properly on Mobile

  • Resolved usefulbattery

    (@usefulbattery)


    11 years, 3 months ago

    Hello everyone,

    I’m building a web page for a client and I’m just about done. However I am having some display problems with Safari and mobile devices. My header, logo and navigation are all out of whack and overlapping each other. There does not appear to be a problem in IE, Firefox or Chrome. I removed the responsive structure, but want the whole site to scale down proportionally for devices with smaller screens.

    I am noticing that the homepage displays correctly (minus the top portion) on my iPad3, but the Apply, News and Contact pages are not scaling-down like the homepage. They cut off on the right side.

    I am using a child version of the Twenty-Eleven theme. I will include some screenshots to show what I am talking about.

    I am close to wrapping this site up so if anyone can help me get over this last hurdle I would appreciate it.

    Website

    Correct SS

    Incorrect SS

    Thanks,
    Matt

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    I can’t find any CSS that applies the scaling of your website in your Child Theme’s stylesheet, so I can’t experience the scaling down issues you experience.

    Thread Starter usefulbattery

    (@usefulbattery)

    11 years, 3 months ago

    At the moment I do not have anything designating what the site should do on smaller screens. However my homepage and staff page fit properly as is while the others do not. Is there a global fix I need to consider correcting?

    Thread Starter usefulbattery

    (@usefulbattery)

    11 years, 3 months ago

    I think maybe I should be a little more specific in the hopes of getting a response…

    I’m using some negative margins in the logo, header and navigation and I have a feeling it might be what’s screwing me up. Are negative margins a no-no when it comes to for formatting? What would be the most appropriate way of setting up the structure of my site?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

    Negative margins do screw around with browser compatibility in general, but without seeing a working example of the problem, the issue is difficult to diagnose.

    Thread Starter usefulbattery

    (@usefulbattery)

    11 years, 3 months ago

    There are two screenshots in my first post, showing how it looks in certain browsers. there is also a link to the site for a live example.

    Thread Starter usefulbattery

    (@usefulbattery)

    11 years, 3 months ago

    Still having an issue. Z-index was able to resolve some problems but it still isn’t looking quite right in Safari. Should I keep trying for a solution with z-indexing or is there a better alternative out there?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Pages Not Displaying Properly on Mobile’ is closed to new replies.