How to hide certain HTML elements in mobile view only (and solve CLS issue)

Written by Claudio Kuenzler - 0 comments

Published on January 11th 2023 - Listed in HTML Internet Personal

---

In the past few days I noticed a CLS problem in Google's Search Console:

CLS is short for Cumulative Layout Shift and measures how the content "shifts" due to additional elements loaded after the content already appeared. Such elements are typically loaded after the content, such as ads, external images or other scripts, heavier JavaScript objects (e.g. image rotation scripts) and so on.

This negatively impacts the browsing experience for the end user (particularly on a small mobile device) and Google is right to call this Layout Shift an issue.

Use a div layer to reduce CLS

For this purpose I had already implemented a special div layer with a defined height above my blog articles (just above the <h1> title of a post) which gives some (sufficient) space for optional ads to be loaded. This would reduce the layout shifting to a minimum.

However in the past few weeks I saw such HUGE ads appear on my blog:

These ads have the doubled size of what my "topad" div layer was supposed to cover! Of course this creates a larger layout shift, especially on mobile phones.

Hide the div layer for mobile view

In order to solve this problem, I decided to completely remove the ads above the post title for mobile view - but mobile view only. But how can this be achieved? The answer is CSS!

If you've worked with Bootstrap, you've most likely come across some @media CSS elements in the Bootstrap style sheet. These are mostly used to load different sizes of images, depending on the used screen size. A small mobile view doesn't have to load a 2 MB image at 1024x768 pixel, a smaller image size with a reduced file size is sufficient and helps to load the content faster. But @media CSS elements can also be used for other HTML elements, not just images.

The div layer in question is called "topad" and now I want to have this topad layer disappear in the mobile view. Let's define a mobile view with a maximum screen width of 600px:

@media only screen and (max-width: 600px) {
        .topad { display:none }
}

For the desktop (and tablet) views with a larger screen width than 600px, the topad layer is shown normally and adds a 200px height "space for ads" on top of the title (as mentioned above):

@media only screen and (min-width: 600px) {
        .topad { min-height: 200px; }
}

Let's see the results

Reading my blog on a Desktop continues to show the 200px topad layer space (here with the ad removed):

However in the mobile view, the topad layer is now hidden. This causes the article title to be shown immediately after the navigation bar:

With this implementation, the layout shift is gone - at least on the mobile view.

For the Desktop there could still be some ads with a height larger than 200px loaded and this could still cause a layout shift. But here I'm in talks with Infolinks (the ads reseller) that a max height/width ads setting should be created.

Add a comment

Show form to leave a comment

Comments (newest first)

No comments yet.