Okay
  Public Ticket #1131537
hide slider
Closed

Comments

  •  2
    george started the conversation

    Hello, I would like to ask if there would be a way to hide the "feature image" from displaying in mobile views? I am asking that because in most cases the feature image in mobile view does not look good, its blur and does not really shows what that pic is about, so if I could hide the feature image in mobile view it would be great, thank you for your time.

    Looking forward to a reply.

  •  80
    Pasquale replied

    Hi George,

    You can do that via the CSS editor: go to Appearance -> Customize -> Additional CSS
    There you can add some custom CSS to the theme. Target the element you want to apply changes at and write your custom style rules (you can use Chrome Inspector for targeting, here's a guide in case you're not familiar with it: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/).

    Cheers!

  •  2
    george replied

    Hello, i tried to use custom css but it seems not to be working, i used that "

    .is-bg-image {
      display:none!important;

     } "

    in Appearance -> Customize -> Additional CSS and i also tried to use that on style.css but still not working, any ideas?

    Thank you.

  •  80
    Pasquale replied

    You should target the element you want to hide Example (see screenshot): Let's say you want to hide that image on smaller devices:

    @media screen and (max-width: 768px) {
        .single-thumbnail { display: none; }
    }

    Hope that that clears it up!

    Attached files:  Screen Shot 2017-04-14 at 6.52.00 AM.png

  •  2
    george replied

    i have tried this 

    @media screen and (max-width: 768px) {
        div#hero.hero.is-bg-image.is-text-light.is-centered.is-fullheight { display: none!important; } 
    }

    via apprearance - additional css and is not working i also tried from the file style.css and still no result, you  could try it yourself in the template and tell me if its working, thank you for your time.

  •  80
    Pasquale replied

    Hi,

    There's no need to add all those selectors, one is enough. In your case I guess you want to hide the hero image on mobile (until 768px) so that's the code:

    @media screen and (max-width: 768px) {
      #hero { display: none!important; } 
    }

    Please note that using @media screen and (max-width: 768px) the hero is still visible when the browser window is > than 768px. Hope that clears it up. Cheers!

    P.S. If you're still having trouble, please provide the URL of your site so I can check it out.