Disappearing Text On Zoom

A few users of my website (https://www.russellip.com) have mentioned an issue with text disappearing from my main screen, or at least being partly concealed, as shown below. I hadn’t spotted the issue myself as I use 100% zoom, which seems to be fine. It does seem to be a problem at higher zoom levels though. The text in question is the title for the first slide.

At 100% zoom (‘Intellectual Propertly’ text visible):

At 175% zoom (‘Intellectual Propertly’ text only partly visible):

At 200% zoom (‘Intellectual Propertly’ text not visible at all):

Any help greatly appreciated!

Hi @iain1,

Thank you for contacting us. I am happy to help with your queries.

To disable viewport zooming, try editing the theme’s header.php file with a child theme, find this line:

<meta name="viewport" content="width=device-width, initial-scale=1">

and replace it with:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Hope that helps.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks very much. I tried that, but it didn’t seem to work. When I zoom in, or resize the browser page, the “Intellectual Properly” text still disappears. Do you have any other suggestions?

I see that there’s a new header update available for the Sydney theme. Might that fix the issue?

Iain

You’re welcome!

I checked further, and found that it might be due this custom CSS code was added into Custom CSS under your site’s Customize menu.

    .home .slide-inner {
        top: 30%;
    }

Please try removing it and see how it goes.

Regards,
Kharis
aThemes Support

Thanks for the suggestion. Deleting that does move the text further down the screen, but it appears over the yellow waveform instead. I changed the 30% to 35% which is slightly better than before, but the text still truncates when I resize / zoom - pls see screenshot below.

I think the ideal behaviour for the text would be that it stays below the header at the top until that Hero Slider part gets replaced with “Our Services” when the user scrolls down.

Hi @iain1,

Thank you for getting back.

So the purpose for repositioning the main slide text is intended to always be visible?

Please confirm, so I can get better context and be able to help you in better way.

Regards,
Kharis
aThemes Support

Thank you!

Yes, the purpose is to make sure the main slide text is always visible against the blue background but also does not go over the yellow waveform, if that makes sense. If that’s not possible, it would probably be OK if the whole word disappeared into the header, rather than it being truncated. My main concern is with the truncation as it looks a little messy.

Hi @iain1,

Thank you for your confirmation.

Try adding this CSS code:

.home .slide-inner {
  min-height: 0px !important;
}

@media only screen and (min-width: 1025px) {
  .home .slide-inner {
    top: auto;
    bottom: 130px;
  }  
}

.slides-container .slide-item {
  background-position: center 138px !important;
  background-attachment: scroll !important;
  background-color: #181f3f;
}

Hope that helps.

Regards,
Kharis
aThemes Support

Thanks again, Kharis.

I tried that code. It put the text under the yellow waveform, which didn’t look great unfortunately.

I may be asking for something that’s impossible :slight_smile: