Adjusting Responsiveness In Twenty Eleven Theme

  • Unknown's avatar
    themabelkwong · Member ·

    Hi there,

    I’ve added a customised header to my blog, mabelkwong.com. I have the CSS upgrade. I’ve added in some CSS code to adjust the responsiveness as per this thread:

    https://en.forums.wordpress.com/topic/adjusting-twenty-eleven-header-image?replies=8#post-2373777

    In tablet view, and when I shrink the screen on my laptop, I get a big white space in between the header image and the menu table. See this:

    header responsiveness

    I was wondering if it’s possible to reduce this white space when the screen is adjusted?

    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    michaelvandenberg · Member ·

    Hi there,

    That’s a nice banner! Did you make it yourself? :)

    I don’t have time to take a thorough look, but I think that you should reduce the top margin of #access and reduce the height of .site-title a.
    Something like this (but you should tweak the numbers a bit I think):

    @media (max-width: 550px) {

	#access {
		margin-top: 120px;
	}

	.site-title a {
		height: 200px;
	}

}
  • Unknown's avatar
    themabelkwong · Member ·

    The banner was illustrated by an artist called Anna/Pinodesk after I came up with the concept. I love it :)

    Thanks for that. I’ve tried adjusting the numbers as you suggested. I’ve tried putting in e.g. -60px in some places and that seems to work at times. I’ll keep working on it.

  • staff-jeanpierreac · Staff ·

    Hi there.

    Let me propose you an alternative.

    The fact is your image is 2.126px × 1.275px and it is used as a background of #branding area. Inside this area, you have two boxes (there is a third one, but doesn’t use space). First one is your title+description box/area, and the second your main menu or navigation bar (“Home, About…”).

    Ok, so your #site-title box, the first one inside #branding, is basically composed by a link to http://mabelkwong.com/. So when you think you are clicking on your (awesome!) header pic. You are in fact clicking on a transparent layer on it (this site-title with a link inside). So it is very important for this scheme to work properly that dimensions of #branding area and your link inside #site-title are pretty the same.

    What are these boxes dimensions?

    • #branding: height and width varies depending on your screen width (There is a bunch of definitions depending on window size ranges).
    • #site-title a (This means the link inside box called site-title in css language): height: 470px; width: 960px;
    • Your pic: your pic is automatically resized to #branding dimensions, respecting your aspect ratio (your original pic relation between height and width). So depending on your screen width –mainly when you narrow it- the transparent link height is bigger than #branding’s, and this cause a displacement to the bottom of your navigation bar (it seems to be a white space to the bottom on your pic, but it is because your transparent link is higher than your pic, and navigation bar starts when transparent link finishes).

    Uh oh…

    There are several ways to solve it, but let me propose you to fix your #branding and #site-title heights both to a relative value, like 12rem. You should also need to delete those boxes padding and #site-title padding-top to make them vertically coincident and to avoid unwanted displacements. Finally we could remove any white space between your pic and your navigation menu (#access margin-top statement). Here it is the example code to be added to your custom css:

    #site-title a, #branding {
	height: 15rem ;
	padding: 0;
	width:100%
}
#site-title {
	padding-top:0px
}

#access {
	margin-top: 10px !important;
}

    I have checked and I would say this solution works fine untill 250px. You could add css rules to be applied with narrower windows, but I’m not sure this would be needed. Just make us know in this case.

    I hope this helps you.

  • staff-jeanpierreac · Staff ·

    Ups.

    Sorry for the format!

    :S

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for that. Pretty comprehensive explanation, but that does explain what’s going on. That transparent layer can be frustrating.

    As per the code, I suppose that would be the way to make the transparent layer and #branding the same size. I plugged it in to the CSS preview box under Appearances/Customisation a bit earlier and set the height to 34rem. However, it still seems to be showing a big space between the header and the menu bar.

    When I left the height at 12rem, that works okay. Perhaps I’m missing something.

  • staff-jeanpierreac · Staff ·

    Hi there.

    I’ll try to explain you…

    The fact is your image is in the background and it is automatically re-sized to the biggest possible height/width without altering the aspect ratio. Your pic aspect ratio is determined by the original size (2.126px × 1.275px). In few words, your image height is going to be 59.97% of your image width in any resize.

    So, imagine your window is 300px wide, which is going to be your background image size? 300px × 179px. But in this case your #branding area is much taller.

    By the way. You could add !important in this code to fix height values even in narrow screens:

    #site-title a, #branding {
	height: 15rem !important;
	padding: 0 !important;
	width:100%
}
#site-title {
	padding-top: 0  !important;
}

#access {
	margin-top: 10px !important;
}
  • staff-jeanpierreac · Staff ·

    Make us know if that works for you. :)

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for that, I got it now. The header pic resizes as you say so it won’t lose it’s aspect ratio and end up all blurry. But we have to be careful about #branding.

    I’ve added in the !important tag, with a height of 34rem. This is what I’m getting in tablet view and if I resize the screen – the white space:

    I’ve tried adjusting the margin-top values for the individual media queries part of my code. That seems to get rid of the white space for certain screen widths.

  • staff-jeanpierreac · Staff ·

    Hi there.

    You are right! And this is because #branding height is 34rem but your background pic height is less than 34 rem. So the white space is in fact the space your background pic doesn’t fill.

    It would be maybe clearer if we “paint” in red the background of #branding area. With the following code, you could check what I mean. So your blog #branding is the red area and your background pic take not the complete space.

    #branding {
    background-color: red;
}

    So maybe height:34rem is too much if you have a narrow screen. But if I understand, you think 12rem is not enough with a wide screen? If so, you could create different statements to be applied depending on your screen width. Just take a look to the following code. There are three different ranges, defined with @media (max-width) or (min-width) directives, that you can custom to your need, with statements inside to be applied in each case .

    @media (max-width: 650px){
#site-title a, #branding {
	height: 15rem !important;
	padding: 0 !important;
	width:100%
}
#site-title {
	padding-top: 0  !important;
}

#access {
	margin-top: 10px !important;
}

}

@media (min-width: 650px) and (max-width: 960px){
#site-title a, #branding {
	height: 25rem !important;
	padding: 0 !important;
	width:100%
}
#site-title {
	padding-top: 0  !important;
}

#access {
	margin-top: 10px !important;
}

}

@media (min-width: 960px) {
#site-title a, #branding {
	height: 34rem !important;
	padding: 0 !important;
	width:100%
}
#site-title {
	padding-top: 0  !important;
}

#access {
	margin-top: 10px !important;
}

}

    I hope this helps.

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for that. It works great now in the CSS preview window and I will put the code in.

    I love colouring the #branding red. Makes it so much easier to see.

    Thank you once again :)

  • staff-jeanpierreac · Staff ·

    @themabelkwong :) Glad to read that!

    Enjoy blogging!

  • The topic ‘Adjusting Responsiveness In Twenty Eleven Theme’ is closed to new replies.