Overriding WordPress Theme CSS for iPhone

[hedgehog]

I am considering adding a @media query or mobile stylesheet to override my client’s WordPress theme formatting.

The client had chosen her WordPress theme partly because it was a responsive one. The previous designer built the page with Visual Composer widgets.

I have been testing on a laptop, iPad, and Android, where it displays almost perfectly. (One single instance of text overlapping an image on an iPad.) We are now finding that the iPhone has several instances of either headers cutting off, images cutting off, or text overlapping. I’m now discovering that some widgets are positioned with absolute, others are relative.

If I were to add code that overrides the Theme & gives a different position property to all divs (when viewed on a small screen), would this work to stop page elements from overlapping? Would the static or relative property be better suited for what I want to do?

The issue does not involve too many elements, so adding a specific @media query for the 2-3 classes being affected would not be a lot of work. However, I’d like to see if a global solution is possible, before deep diving into specific classes.

Would be very grateful to anyone who can offer any thoughts on this.

[deb]

Check this url:

http://stephen.io/mediaqueries/

[Beverleyh]

If I were to add code that overrides the Theme & gives a different position property to all divs (when viewed on a small screen), would this work to stop page elements from overlapping?

Maybe. Probably. Try it and see. It’s hard to comment when we don’t know what you’re working with.

Would the static or relative property be better suited for what I want to do?

It depends on your needs. Both will make elements sit in the normal flow of whatever’s around them, the difference being that ‘relative’ responds to other positioning properties (top/right/bottom/left) if they are set, which is likely because you say that absolute positioning is already in effect.

Try ‘static’ to see what happens. If not, try ‘relative’ with other positioning overrides.

[Author]

Posts