Archived topic

page hero text overlaps logo text, and unusual font next to logo on mobile

10 replies · Started by Mark on January 5, 2021

Viewing posts 1–11 of 11

January 5, 2021 at 5:30 am #1606331

I have a site at hardyness.com. It looks fine on the desktop, but on mobile (at least on my iPhone) the text next to the logo overlaps the page hero text. Is there anything I can do about that on mobile (e.g., some CSS, some customizer setting, or some setting (only for mobile) in the elements section?

Also, for some reason, the logo title font is coming out as some type of cursive on mobile, but not on desktop.

Thanks

Mark

January 5, 2021 at 2:24 pm #1607198

Hi Mark,

Try this css to add margin on top of the heading on mobile:

@media (max-width: 768px) {
    h1.hero-heading {
        margin-top: 130px;
    }
}

For the cursive title, it's because you have this CSS added:

/* adjust site title */
.navigation-branding .main-title a {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 1.3em;
    font-weight: inherit;
    margin-left: -35px;
}

Remove the cursive from font-family should fix this issue.

Let me know :)

January 5, 2021 at 2:47 pm #1607214

What’s weird is the cursive font is only showing up on mobile, not desktop!

Mark

January 5, 2021 at 7:15 pm #1607372

Thank you. That seems to solve the problem on the home page (for mobile), but the inner-pages still have the problem. In my "elements" for inner page hero, these page heroes uses the featured image for the page hero background, so I imagine they need a different CSS to adjust the page title position on mobile.

Mark

January 6, 2021 at 12:51 am #1607544

Hi,

What’s weird is the cursive font is only showing up on mobile, not desktop!

Hi, I don't see this happening. Is this solved?

In my “elements” for inner page hero, these page heroes uses the featured image for the page hero background, so I imagine they need a different CSS to adjust the page title position on mobile.

Can you specify how you want it to appear? Any mockup images will be helpful to give us an idea of what CSS to provide.

Let us know.

January 6, 2021 at 5:41 pm #1608739

Actually it is not solved on mobile. For example, if you go to the page Services | Personal Training, on the phone you will see that the title "Personal Training" is too high up and overlaps the logo and the text next to it "Hardyness." So on mobile, I would like to lower the "Personal Training" page title down so that it doesn't overlap with the logo and text next to the logo.

It is OK on desktop.

Thanks
Mark

January 6, 2021 at 8:46 pm #1608842

Hi Mark,

Actually the mobile header overlapping issue doesn't need CSS, there's a better way to just add Offset Site Header Height to increase the top padding.
https://docs.generatepress.com/article/header-element-overview/#offset-site-header-height
https://www.screencast.com/t/HviiifBW5

Let me know :)

January 7, 2021 at 5:46 am #1609345

Ying,

I tried adjusting the "Offset Site Header Height" on mobile, and it seems to have no affect whatsoever.

Mark

January 7, 2021 at 5:59 am #1609364

That setting DOES affect the home page header element, but NOT the inner page ones that use the "featured image" as the header background.

Mark

January 7, 2021 at 6:02 am #1609369

Ying,

I apologize, it is working now. Sorry

Mark

January 7, 2021 at 11:48 am #1609997

No problem :)
Glad you figured it out!

This archived topic is closed to new replies.

Start building better websites today.