WordPress.com

1. 1000wordspro
   Member
   Oct 10, 2012, 6:08 PM

   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 cloudcapsules.wordpress.com.

2. designsimply
   Staff
   Oct 13, 2012, 12:40 PM

   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.

Topic Closed

This topic has been closed to new replies.