Home Forums Weaver Xtreme Theme Hide Row on Mobile

Topic Resolution: Resolved
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #73638
    Maggard_Manda
    Participant

    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

    #73639
    Weaver
    Keymaster

    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.

    #73640
    Maggard_Manda
    Participant

    @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.

    #73641
    Weaver
    Keymaster

    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.

     

    #73642
    scrambler
    Moderator

    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

    #73643
    Weaver
    Keymaster

    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.

     

    #73644
    Maggard_Manda
    Participant

    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.

    #73645
    Maggard_Manda
    Participant

    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;}

    #73646
    scrambler
    Moderator

    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.

     

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.