WordPress.com

1. jwmcnair
   Member
   Oct 14, 2011, 7:11 PM

   Hi,

   I'm trying to use the CSS Stylesheet Editor to change the size of the header in the Twenty Eleven theme. It takes up too much real estate on my blog's home page, and I want to reduce its height so that the header doesn't dominate as much. Of course, I still want it to run the usual width of the post area.

   I'm a beginner at CSS. I've tried editing the "#branding" or "#branding img" selectors so that "height: 50%;" and "width: 100%;" but that doesn't seem to work. If I try only changing the width to 50%, then the image shrinks in both dimensions--but as I said I want to leave the width dimension untouched.

   Maybe I'm not coding right, or maybe there's an entirely different way of going about this. I'd greatly appreciate any suggestions....!

   The blog I need help with is jaymcnair.wordpress.com.

2. thesacredpath
   Member
   Oct 14, 2011, 7:16 PM

   The site linked to your username says this:

   findingnorthkorea.wordpress.com is no longer available.

   The authors have deleted this blog.

   We need a link to the site you are talking about.

3. jwmcnair
   Member
   Oct 14, 2011, 7:18 PM

   Sorry--when I posted the comment it asked me what site I was talking about, so I assumed that would be visible to all.

   Site is jaymcnair.wordpress.com

4. thesacredpath
   Member
   Oct 14, 2011, 8:54 PM

   Here is the issue. Twenty Eleven is a reactive theme design. That means that it will automatically adjust for virtually any screen size from the largest desktop monitor clear down to a smartphone (play with your browser window width to see how that works).

   Give the following a try, but you are probably not going to like it since it will severely distort the image.

   #branding img {
   height: 144px;
   }

5. jwmcnair
   Member
   Oct 15, 2011, 5:03 PM

   You're right, it does distort the image; but maybe I can find a way to upload something that's distorted equally in the wrong direction, so that when the CSS squishes the image it actually restores it to the right proportions...

   Thanks for your help!

6. thesacredpath
   Member
   Oct 15, 2011, 5:31 PM

   You are welcome.

   A smaller image could be uploaded to the media library and then that URL could be put into one of the header divs via a background declaration, but it would very likely lose the reactive design resizing for the header image.

Topic Closed

This topic has been closed to new replies.