[CFarone]

This is the web site that I am currently creating using the Catch Everest theme http://carlwoodall.com/wordpress

I have created a Child Theme (I know you mentioned previously that I didn’t need to have a Child Theme, however I am more comfortable working with the theme that way). In the Child Theme I have customized the masthead area.

When viewing the site on the internet, full view, the Masthead looks perfect. The issue I am having is that the when I reduce the screen size on my monitor and/or look at it on my iPad, there is a white gap that shows up above the menu.

When I use Firebug to look at the area, I see that the Masthead and the hgroup-wrap are not reducing in height when resized.

Not sure what I should do to get rid of the white gap.

Thank you, again, for your assistance.

 

[CFarone]

Hi, Sakin…

Just wondering if there is any additional information I need to give to you regarding this issue.

 

[Sakin]

@CFarone: You have just changed the main css but not responsive.css. So, check this

@media screen and (max-width: 1060px) {
#hgroup-wrap {
padding-bottom: 0;
}
}


Your site looks great.

[CFarone]

Hey, Sakin

Thank you for the reply and your kind comments about my web site in progress.

Unfortunately, making the hgroup-wrap padding bottom zero did not work for some reason.  As a test I also used the same recommended code in all @media sections and the original padding still appears on the hgroup-wrap when I look at it on Firebug.

After some experimenting what did remove that white space above the menu bar was the following code:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* iPhone Portrait */

#hgroup-wrap {
max-height: 270px;
}
}

I am not sure why that worked and I am EXTREMELY hesitant about using an actual height number in any @media as I know how touchy responsive modes can be.

Any thoughts as to why the padding-bottom zero code did not work would be appreciated.

I love this theme and appreciate your help in making it my vision.

[Sakin]

@CFarone: I am not being able to open your site http://carlwoodall.com/wordpress. So, I am not being able to check it.

[CFarone]

Sorry, Sakin…there was some issue with the GoDaddy server earlier. You should be able to see the site now.

[Sakin]

@CFarone: Looks like you have added my css in your style.css. You have to add that css in “Custom CSS” box in Theme Options panel which will remove the padding.
@media screen and (max-width: 1060px) { #hgroup-wrap { padding-bottom: 0; } }

If you add this in style.css, it will not work as responsive.css will overwrite it. Either you need to edit your responsive.css or you have to add the above css in “Custom CSS” box in Theme Options panel.

[Author]

Posts