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?


1 Answer 1


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.

Further reading on media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.