Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I have set up a WordPress blog and a Masthead with Logo, Title and Tagline. I have used some custom CSS to adjust the padding.
It displays correctly on the Home Page
When I create a new Post the Title is displayed lower on the page and displaces / overwrites the Tagline / Description.
Is there a different element for the title on Posts?
Site Address: https://partingshot.me.uk/wp/esa/2021/08/06/stuck-in-the-middle/ (an example post)
Hi Chris
Thanks for reaching out. I like your website, nicely done.
We recently made a small SEO change. The site title is an h1 tag on the home page and a paragraph tag on all other pages. In your Custom CSS you’ll need to make a small adjustment. Change:
#masthead h1.logo-title { position: relative; margin-top: -75px; }To:
#masthead h1.logo-title. #masthead p.logo-title { position: relative; margin-top: -75px; }Please, give the above change a try and let us know how you get on.
It might be worth limiting the rules in your Custom CSS masthead section to tablet and desktop to help the mobile header layout. What you could do is add a media query wrapper around the masthead rules.
@media (min-width: 769px) { /* All rules here will only apply from 769px resolution and above. */ }Hi Andrew,
Thanks for coming back so quickly.
I may have misunderstood but I tried substituting the new CSS code for what I had before. This seemed to throw a syntax error:
“Expected IDENT at line 42, col 25.”
line 42, col 25 would be the position immediately after: “”#masthead h1.logo-title.”
With that saved the code had no effect on either Home or Post pages.
I then reinstated the original and added just the paragraph line so that both are active:
#masthead h1.logo-title {
position: relative;
margin-top: -75px;
}
#masthead p.logo-title {
position: relative;
margin-top: -75px;
}
This seemed to have the desired effect.
I added the media wrapper as you suggested and that certainly improves mobile phone appearance in portrait mode but not rotated to landscape.
Thanks for your help.
Hi Chris
Apologies, it should have been:
#masthead h1.logo-title, #masthead p.logo-title { position: relative; margin-top: -75px; }I typed a period instead of a comma. You can list multiple selectors in one rule using a comma after each selector.
To target tablets, increase the breakpoint in your media query. At the moment it’s 769, try 1024.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Andrew,
Once again thanks for such rapid response. That makes perfect sense. I have amended to combine with the comma and all is well. Much appreciated!
I understand the point about changing the breakpoint and will play around with that for devices.
Thanks again for your help
Chris
Hi Chris
Thanks for the update. I’m glad to hear you’re making further progress!
Cheers for now.
Andrew