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

Written by - 0 comments

Published on - 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:

Huge ads loaded, causing large cumulative layout shift

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.

RSS feed

Blog Tags:

  AWS   Android   Ansible   Apache   Apple   Atlassian   BSD   Backup   Bash   Bluecoat   CMS   Chef   Cloud   Coding   Consul   Containers   CouchDB   DB   DNS   Database   Databases   Docker   ELK   Elasticsearch   Filebeat   FreeBSD   Galera   Git   GlusterFS   Grafana   Graphics   HAProxy   HTML   Hacks   Hardware   Icinga   Influx   Internet   Java   KVM   Kibana   Kodi   Kubernetes   LVM   LXC   Linux   Logstash   Mac   Macintosh   Mail   MariaDB   Minio   MongoDB   Monitoring   Multimedia   MySQL   NFS   Nagios   Network   Nginx   OSSEC   OTRS   Office   PGSQL   PHP   Perl   Personal   PostgreSQL   Postgres   PowerDNS   Proxmox   Proxy   Python   Rancher   Rant   Redis   Roundcube   SSL   Samba   Seafile   Security   Shell   SmartOS   Solaris   Surveillance   Systemd   TLS   Tomcat   Ubuntu   Unix   VMWare   VMware   Varnish   Virtualization   Windows   Wireless   Wordpress   Wyse   ZFS   Zoneminder