Jump to content
Queue-it

Hide container background image on mobile

Recommended Posts

Queue-it

Hi,

Do you know how to hide a container background image only mobile?

I've tried all the possible versions with .@media display hide [pl_uploads_url]/2016/10/image.png    but it would hide all container not just the image. 

 

Share this post


Link to post
Share on other sites
Simon

what media queries have you tried?

Share this post


Link to post
Share on other sites
Queue-it

Figured out a  way to do it! Thanks

  • Like 1

Share this post


Link to post
Share on other sites
BlueSkyCreative

I have used this code before...switch out the impulse unique section for the one you want to control

 

http://stephen.io/mediaqueries/

 

/* impulse slider adjust for mobile devices*/
 
 
 
 /* target only iPad all generations in portrait & landscape */
 
 /* hides the phone slider */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { #impulse_ufzn7rt {display: none !important;}}

 /* hides the desktop slider */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { #impulse_uu735vp {display: none !important;}}

/*target only ipad 3 and 4 with Retina iPad in portrait & landscape */

/*hides the phone slider */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { #impulse_ufzn7rt {display: none !important;}}

/*hides the desktop slider */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { #impulse_uu735vp {display: none !important;}}


 
 /* target iPhone 6,iPhone 5 & 5S in portrait & landscape */
/* hides the ipad slider */
 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) { #impulse_uyxmrwj{display: none !important;}}
 /* hides the desktop slider */
 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) { #impulse_uu735vp{display: none !important;}}
    
    
    /* target the desktop */
    /* turn off phone slider */
    @media only screen 
and (min-device-width : 1024px) 
 { #impulse_ufzn7rt{display: none !important;}}
     /* turn off ipad slider */
       @media only screen 
and (min-device-width : 1024px) 
 { #impulse_uyxmrwj{display: none !important;}}
 
 
    
    /* phone slider impulse_ufzn7rt */
    
      /* ipad slider impulse_uyxmrwj */
    
      /* desktop slider impulse_uu735vp */
      

 

  • Like 1

Share this post


Link to post
Share on other sites
Queue-it

I wanted to have to specific containers show a different content on mobile so my version was this:

 

@media screen and (min-width: 480px) {
#container_1 { display: none; } }

@media screen and (max-width: 480px) {
#container_2{ display: none; } }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×