Hide Row on Mobile

[Maggard_Manda]

Hello, I have a large slideshow on the home page of a website, my client would like it hidden on mobile. Can anyone tell me how to do that?

Home

[Weaver]

Try adding this custom CSS:

.is-mobile #pg-2-0 {display:none !important;}

Note that if the definition of the panel grid used ito define the slide show gets changed, the #pg-2-0 CSS id might change.

[Maggard_Manda]

@Weaver. Am I to put that code in the Custom CSS Rules? I did that, and it doesn’t seem to be working.

And I’m not quite sure what your Note means.

[Weaver]

That is correct – in the Customizer -> Custom CSS -> Global Custom CSS. You might be having a cache needing to be cleared as when I now look at your site, that rule is not there yet.

That slider seems to be added via some kind of grid panel or other widget like item that is creating a CSS ID for the HTML with the slider that uses an auto-generated id with the format pg-2-0. If that content gets changed, there might be some other generated pg-x id generated instead.

 

[scrambler]

The rule does not show up, so If you did put it in, you either have a cache issue, or some syntax error in the CSS file.

You can paste the content of the CSS file here so we can check it out

[Weaver]

I think @scrambler means paste the content of the Custom CSS option and not file here so we can check it. But I’ve tested the rule using the Firefox developer tool, and it does work. The developer tool allows one to edit CSS on the fly to see how it works.

 

[Maggard_Manda]

I added the code about an hour ago. I did just clear my cache. I know that our server can sometimes take 24 hours for things to propagate outside of my desktop.

[Maggard_Manda]

This is everything that I have in the Custom CSS Rules.

.is-mobile #pg-2-0 {display:none !important;}

#content li {padding-bottom: 1.0em !important;}
#content li.sow-slider-image {padding-bottom: 0 !important;}
#content {line-height: 150%; }

.myline {height:4px;width:300px;background-color: #0384bf;}

.wvrx-flex-cols {overflow:visible !important;}

.page-id-2 #container{max-width:100% !important;}
.page-id-2 #content{max-width:100% !important;}
.page-id-2 #content{padding-left:0px;padding-right:0px;padding-top:0px;}

.socialprefooter {background-color:#014d73; padding-top:30px; padding-bottom:30px;}
.reviewstext {padding-top:75px;margin-left:2%; margin-right:2%;}

.prefooterreviewslider {max-width:1100px;margin-left:auto;margin-right:auto;}

.customhtml2 {line-height:0px;}
#footer-widget-area iframe {margin-bottom:0px;}
footer-widget-area .wvrx-fb-col-1 {line-height:0;}
.footercontactbutton {padding-bottom:20px; padding-top:10px;}

#site-info {padding-top:8px; padding-bottom:8px;}

[scrambler]

Well all your rules are there except that first one, so I would say something is definitely not updating.

Just to be sure there is not something weird with the beginning of the file, try putting the rule in the 4th line instead.

Also you do have a syntax error down in the CSS(so not the issue). The selector in the rule

footer-widget-area .wvrx-fb-col-1 {line-height:0;}

Is missing either a dot or a # at the beginning,

Move the rule, clear all caches, or better if you are using a cache plugin, deactivate that.

 

[Author]

Posts