Hide Tab Titles from Tabs Block

Question

I have this Tab on my website-- https://prntscr.com/1zii0ab

On Mobile, I will like to hide the Titles of 3 of the Tabs, and on Tablet I will like to hide the Titles of 2 of the Tabs.

When I used Google Inspect for one of the Titles,this is what I saw as the CSS--

(span class="gutentor-module-tabs-title")Trust(/span)

So what I really want to hide is the last 3 Titles on Mobile with that CSS Class, and the last 2 Titles with the same CSS Class on Tablet.

How do I write the CSS to be able to hide these elements on Mobile and Tablet as intended?

Regards

Sambuxc · Accepted Answer · 2021-11-25 16:50:44Z

What you will need to do is specify CSS styles for specific screen widths. For example:

/* for mobile & tablet */
    @media (max-width: 989px){
    .itemOne, .itemTwo{ display: none; }
    }

This display: none style for .itemOne & .itemTwo will only be applied for screens up to 989px wide. You can choose your max width as you need.

I hope this makes sense.

1 Answer 1