News Pro – How to get a simple responsive header – No image – No widget

[Mark_o]

Hi

I am using New Pro and want a simple responsive header

- I don't want to use a image/logo (520 x 180 pixels is image size for the header)
- I don't want to use the widget (header right widget)

If i don't upload the image and don't activate the widget, I get the site title BUT it is not responsive - does not look good on a mobile (see link below):

http://readingspace.com/

How do i fix this ?
Also is it possible to change the font size /style for just the header ?

I have looked at a possible solution of having a "Full Width Header Image" as described by Brad Dalton but would prefer a simple stylized text as header.

https://wpsites.net/web-design/news-pro-full-container-width-header-image/

Would really appreciate any help I can get.

Mark

[sangfroidweb]

Hi Mark!
You are on to the solution by looking at changing the font size of the site title. The issue on mobile is that the text of the title one word (which means the text doesn't wrap by default) and at the current font size it is too large to fit on smaller phone screens (less than 400px), so it's hanging over and interfering with the layout at that size.

To adjust that, you can adjust the font-size for the .site-title element on screens less than 400px wide by using the following css. You can add this to the bottom of the stylesheet.

@media only screen and (max-width: 400px) {
.site-title {
font-size: 38px;
font-size: 3.8rem;
}
}

38px seems to fit even on iPhone 5, but you can obviously adjust that to whatever you prefer.

Any global changes to the h1.site-title can be made at line 1271 which is:

.site-title {
font-weight: 700;
font-size: 48px;
font-size: 4.8rem;
font-weight: 700;
line-height: 1;
margin: 0;
text-transform: uppercase;
}

The color of the .site-title is applied to the a tag inside the h1, so if you want to change the color of the site-header text, you'd need to adjust the color of the a tag on line 1283 of the stylesheet which is:

.site-title a,
.site-title a:focus,
.site-title a:hover {
color: #000;
}

I hope this helps! Let me know if I misunderstood the questions.
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Mark_o]

Hi Liz

This is exactly what I was looking for !!!

Thanks a lot for your help.

Mark

[Author]

Posts