Executive Pro header change and responsive padding issue

[Kristy]

Hi all,

I'm using Executive Pro theme on a site I'm building.

I have changed the header size on my site successfully to 1140 x 200 pixels. I did this by following Brad Dalton's post http://wpsites.net/web-design/add-full-width-header-image-to-executive-pro-theme and then including the new banner in the Appearance/Header section.

I followed all the instructions to update the header in each of the different sized devices and got it to work.

I now have an issue with padding/spacing in the smaller devices. You can see the banner really well on all devices but the smaller they get the bigger the space between the header and the menu.

I'd like to know how to fix this without changing the full size code as it looks great and doesn't have any spacing issues.

My site is http://www.mittapub.com/

Thanks.

http://www.mittapub.com/

[emasai]

Add a smaller min-height to your media queries, it is picking up the min-height of 200px from the full width site.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Kristy]

Hi Lynne,

Thanks so much for the quick response. I've been mucking around trying to do this and can't seem to make it work.

Could you possibly give me an example of the code I need to include to make this work?

Thanks.

[emasai]

Line 2065 in your css file states min-height: 200px but none of your media queries give a min-height so .header-image .site-title a picks up the original size. You just need to write a css rule into your various media queries of min-height of a smaller size. The code is simple min-height: 120px; you will need to visually figure out what size works best at what width. Does that explain it better?

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Author]

Posts