Twenty Eleven Theme – Prevent header being distorted when browser width changes

  • Hi Everyone,

    Would setting a min-height and a min-width prevent my header image from getting squashed whenever the browser window is resized by a visitor? Currently, my header image is squashing (and not maintaining it’s original aspec ratio) whenever the browser window is changed beyond a certain threshold.

    I’ve tried setting minimum widths and heights, however my page layout continues to change…which I thought would be prevented by “overflow: hidden”. My sidebars bump down below my posts when the browser window reaches that threshold. I’d rather those stay put.

    This is the code I entered:

    #primary {
	float: left;
	margin: 0 -26.4% 0 0;
	min-width: 790px;
	min-height: 900px;
	overflow: hidden;
}
Viewing 3 replies - 1 through 3 (of 3 total)

  • You should be using a child theme for your changes!!!

    twenty eleven is a responsive theme, it will dynamically re-size for smaller browsers!

    You will have to make it non-responsive, this is not-tested.

    #primary {
	float: left;
	margin: 0 -26.4% 0 0 !important;
	min-width: 790px !important;
	min-height: 900px !important;
	overflow: hidden;
}

    Also

    #content {
	margin: 0 34% 0 7.6% !important;
	width: 58.4% !important;
}

    HTH

    David

    Thread Starter tdmac

    (@tdmac)

    Hi David,

    Thanks so much for the responses. (I hadn’t gotten your response for the other until after I posted this!) Anyway, I’m DEFINITELY using a child theme for my changes. I don’t wanna mess stuff up!

    I guess I have to weigh what’s more important. Being device friendly or want to stick to my header not getting distorted. I’ll try your code and see what happens. Thanks!

    Might there be a way I can assign properties to the header alone, so it doesn’t get squashed, while allowing everything else to reposition for smaller browsers and devices? Assuming it would be a matter of applying the same principles to that div.

    Thanks again.
    tdmac

    You would set the branding image width as fixed, untested but something like.

    #branding img {
  min-width: 960px;
}

    Hide it on smaller devices.

    /* = Small Device Support
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 767px) {

   #branding img {
      display: none;
   }
}

    Resize your browser window to less than 767px and the header should dissapear!

    You could build in a second mobile header image into the theme and switch between the two, hide it in the main css and show it in the mobile style so a main and a responsive mobile header.

    HTH

    David

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Eleven Theme – Prevent header being distorted when browser width changes’ is closed to new replies.