CODEWITHSUNDEEP
androidhtmlioscss
Paul van den Dool
Paul van den Dool

Reputation: 3212

Different styling errors on different devices

I've spent the day repairing some styling errors the on website linked to below. http://www.thebistronomy.com

During tests I've stumbled upon two one problems I can't resolve.
1. The logo
The logo is absolutely positioned in the middle with left: calc(50% - 150px) (assuming the logo has a width of 300px. The positioning is adjusted with media queries when the logo decreases in size). But on several devices and browsers, the logo is displayed on the left.
This happens on:
- Chrome and Safari on iPad with iOS older then iOS7 (possibly also on iPhone)
- Native internet browser on Android tablet (version unknown)

2. Language select menu
The little menu that holds the three language options also seem to ignore some styling, but I can't figure out why. On wider screens is positioned on right with a float. And the list items (one per language option) are positioned horizontally with display: inline-block. It gets it's styling from the navigation above it. So when on smaller viewports the navigation changes from horizontal to vertical order, the language select does also. So I add code in a media query to counteract that. It works in smaller browser viewports on my desktop, but doesn't work on handheld devices.
This happens on:
- iOS devices (iPad and iPhone) with iOS8 and iOS6 on both Safari and Chrome (not Android devices)

I've tried several different ways of positioning the elements and I've tried using the @media handheld media query to no avail. I've been thinking about using an entire different stylesheet for mobile devices, but that should give the same styling errors.

Any help is much appreciated.

Upvotes: 0

Views: 40

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29635

For the logo issue, if calc() causes trouble, then avoid it and use CSS transformations:

#logo {
    ...
    left:50%;
    transform: translate(-50%, 0%);
}

Another advantage of this method is that even if you change the logo image, it will always be centered without making changes to the CSS.

For the menu issue, I cannot tell without knowing what issues you are having and/or what styling is being ignored.

Upvotes: 1

Related Questions