Header Area Keeps Shrinking

everydayelectronics365 · Member · Feb 24, 2017 at 5:05 pm
Copy link

Add topic to favorites
Hey Community,

We’re using the Baskerville 2 theme and when we published our site, it made our header shrink down. We used to use a much longer site description and everything fit fine, but now that we’ve shortened our description its shrunk down our header. Now it looks off especially on mobile.

If there’s anyway someone could assist us with this it’d be greatly appreciated.

Thanks in advance!

http://Everyday-Electronics.com

The blog I need help with is: (visible only to logged in users)
kathrynwp · Staff · Feb 24, 2017 at 7:51 pm
Copy link
I looked at your site at a variety of screen sizes but nothing looked out of sorts. Could you please provide a screenshot of what you’re seeing on mobile that doesn’t look right?
http://en.support.wordpress.com/make-a-screenshot/

You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library so I can see it. Thanks.

Also please provide:

– what specific device you’re using (i.e. Nexus 7)
– what version of Android you’re using (i.e. Android 4.4.4 Kitkat)
– what browser you’re using (i.e. Chrome)
everydayelectronics365 · Member · Feb 24, 2017 at 8:30 pm
Copy link
We’ve added two screenshots to our media library. Both were taken on a Samsung Galaxy S7 on the Samsung internet app, but just at different times.

We know it shrunk down because we changed our site tagline but we were hoping there would be a way to keep our header its default size with the site title and tagline in the center.

As always thanks for your time.
kathrynwp · Staff · Feb 24, 2017 at 8:45 pm
Copy link
Thanks for the screenshots. I think I understand the issue better now. The header element has a certain amount of top and bottom padding at screen widths of different sizes. With your new shorter tagline, this means that the header as a whole appears shorter as well.

You can increase the top and bottom padding at different screen sizes using a few media queries. Give this a try and see how you like it. You can adjust the padding as you like for the different breakpoints.
```
.header {
  padding: 100px 0;
}
@media (max-width: 800px) {
  .section.header {
    padding: 80px 0;
  }
}
@media (max-width: 600px) {
  .section.header {
    padding: 70px 0;
  }
}
```
everydayelectronics365 · Member · Feb 24, 2017 at 9:37 pm
Copy link
It worked perfectly Kathrynwp! We’re greatful for the work you’s provide on this forum.

Things may not always be achieveable, but you’s always respond with reliable options, and exceptional support.

Thanks again.
kathrynwp · Staff · Feb 24, 2017 at 9:59 pm
Copy link
Glad to hear that did the trick and thanks so much for the kind words! Really appreciated.

Have a great weekend!

No items found.