Customized great on computer – iPad jumbled

1000wordspro · Member · Oct 10, 2012 at 6:08 pm
Copy link

Add topic to favorites
I’m a beginner but was able CSS to get the exact look wanted. But when viewed on an iPad or iPhone the menu bar overlaps the content. Mobile version is turned off in the preferences currently, but it does not seem to make any difference. Is there a way to modify the code to have it look the same on mobile devices?

http://cloudcapsules.wordpress.com

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Oct 13, 2012 at 12:40 pm
Copy link
I would recommend looking at the theme’s original stylesheet to see how the theme author’s have targeted different devices (if the theme has a responsive design, there will be @media rules for them) and follow that model.

In the Twenty Twelve CSS here:
https://s1.wp.com/wp-content/themes/pub/twentytwelve/style.css?m=1350058072g&minify=false

You can see that there is an @media rule for large screen sizes at the bottom. Here is what the rule looks like:
```
@media screen and (min-width: 960px) {
    /* a bunch of other CSS */
}
```
Looking in the custom CSS you applied, I found an example of some CSS that doesn’t make sense for an iPad:
```
.main-navigation div {
	display:inline-block;
	margin:0 auto;
	margin-right:-40px;
}
```
Some of that may work, but the margin-right rule seems way too big for an iPad. However, adding a bunch more CSS to target just iPads seems like doing extra work. Instead, I would recommend editing the custom CSS you already added by wrapping it in the @media rule I mentioned above. That way, you’ll apply your CSS changes just to large screens and let Twenty Twelve keep its default for smaller screen sizes (it should just work). If you wanted to make tweaks to smaller screen sizes (like the iPad), you could then add in additional media queries for that.

No items found.