WordPress.com

1. iradpress
   Member
   Oct 26, 2012, 3:58 AM

   Blog appearance skewed on ipad.
   Side bar items not proportionate to its reduced size, same with sidebar titles and all other heading title fonts h1, h2, h3, h4
   thumbnail images not reduced proportionately.
   Ditto with main menu items.
   Tried changing code in @media for 800px, was not of much use.
   Would appreciate all help in making the blog appearance seamless on ipad and browser.

   The blog I need help with is justhomemade.net.

2. designsimply
   Staff
   Oct 27, 2012, 12:42 PM

   You have a lot of similar rules changing the font size in different areas of your CSS, and I think the source of the font issue is with how all of those rules combined were working together. Some of your rules update font-size to 34px and some to 1.2em.

   I see that you've patched the problem by adding the following rule to override the others:
   

   @media (max-width: 800px) {
   	h1.entry-title,
   	h1.entry-title a,
   	.entry-content h2,
   	.entry-content h3 {
   		font-size: 1.2em!important;
   	}
   }

   In that set, the 1.2em is applied to post titles once for individual post views (for "h1.entry-title") and twice for post titles on the home page (for "h1.entry-title") because they are also links. You'll see this if you compare post title size on the home page compared to single posts. That's because the 1.2em is a relative font size and is compounded if applied to the same element more than once.

   If you take the "font-size: 1.2em!important;" rule out, then I think this rule was being applied for the iPad (which made it look large in contrast to the smaller iPad screen and different compared to other fonts which may have been getting set relatively (using "em" instead of "px").

   .entry-title {
   	font-size: 34px
   }

   You also have other rules such as the following which would override the title font size in some cases.

   .singular .entry-title {
   	font-size: 28px
   }

   Since you have so many rules in your CSS for the same thing overlapping each other, it can get a bit confusing. Using the !important rule to override things can work, but if you use it too many times then it can become a mess to work with. What you should do is make sure you understand how CSS specificity works. More specific rules get precedence. The more detailed the selector, the more specific it is (for example "h1.entry-title" is more specific than ".entry-title"). Also, if there are two rules for the same thing, the one that appears last gets precedence—so later rules are more specific.

   To learn more about CSS specificity, see this tutorial:
   http://www.htmldog.com/guides/cssadvanced/specificity/

3. designsimply
   Staff
   Oct 27, 2012, 12:43 PM

   I know you have made a lot of edits to your CSS, however, you appear to have copy/pasted several rules that you don't need. In general, when you are still going to use most of the CSS from the original stylesheet, you should use the "Add my CSS" option on the Appearance → Custom Design → CSS page and just add CSS to the editor for changes you'd like to make instead of copy and pasting the entire original ruleset. When you copy/paste, other problems can happen as well, i.e. url() values will no longer work until you update them to full URLs starting with http://.

   Even though you have made several changes, it might be worth it to switch the setting and copy just the changes into the editor. It will make working with your CSS far easier in the future and it would make tracking down problems like the one with the title font sizes go more smoothly.

Topic Closed

This topic has been closed to new replies.