Header Tags on Mobile

  • Resolved BIrdie

    (@goldendust20)


    7 years, 11 months ago

    Hi friends.

    So I added a style to put text shadow and a transparent white background behind the h1 tags on mobile because it’s hard to read the text with the image behind it.

    On my desktop version with my browser scaled down I can see this update.
    On native mobile (iPhone) it’s the featured image replacing the video, and for some reason the h1 targeting that works on desktop does not work on mobile.

    Any ideas what’s happening here or how to target the <h1> tag for the mobile to set the same as it does on desktop?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    7 years, 11 months ago

    @goldendust20 It appears you have a gap in your media queries, which is causing different results at different sizes, see this screencast: http://cld.wthms.co/UU8g3J

    Since this is custom CSS you are adding, we’re not able to assist beyond this.

    Thread Starter BIrdie

    (@goldendust20)

    7 years, 11 months ago

    Hi Jesse,
    It works on the browser scaling the browser window down to mobile as expected. It’s when it’s on a native mobile device (iPhone) where the video is swapped out with an image, and the header text ignores header styling, including !important tags. I can’t inspect on my phone, I was just curious if this was something you’ve seen as I cannot seem to have any effect on the styling.

    https://snag.gy/3hSgac.jpg

    Thanks!

    jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    7 years, 11 months ago

    @goldendust20 I see what it is, your rule is .homepage--postheader .overlay h1 but on mobile there is no .overlay element:


    Link to image: http://cld.wthms.co/c5bqch

    Thread Starter BIrdie

    (@goldendust20)

    7 years, 11 months ago

    Perfect! Thank you Jesse. You rock.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Header Tags on Mobile’ is closed to new replies.