This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Title Display Differs Home v. Post

Open 6 replies customizationthemetheme-vantage
Chris Hutchins
4 years ago · Last reply by Andrew Misplon 4 years ago

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)

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Andrew Misplon Staff 4 years, 4 months ago

    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.

  2. Andrew Misplon Staff 4 years, 4 months ago

    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. */
    
}
  3. Chris Hutchins 4 years, 4 months ago

    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.

  4. Andrew Misplon Staff 4 years, 4 months ago

    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/

  5. Chris Hutchins 4 years, 4 months ago

    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

  6. Andrew Misplon Staff 4 years, 4 months ago

    Hi Chris

    Thanks for the update. I’m glad to hear you’re making further progress!

    Cheers for now.

    Andrew

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread