Desktop image appearing first on mobile

Support
#1

Hello,
I have the background image on the rev slider hidden on mobile yet it is appearing since I did the update. Please look at the first slide at this url on mobile. https://lbylfilms.net
Thank you

#2

Hi @Jennine,

I have checked your slider and I could not find any code the hides the background image. Would you mind providing us a screenshot of your settings or maybe give us access to your site so that we can carefully check your slider?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Cheers.

#3

sure I attached it. Thanks

#4

Hello @Jennine,

You created the homepage in Pro editor and added a custom css:

/* landing-page */
/* .padding-slide .slotholder{
  padding: 0 8%;
} */

/* media queries */
@media only screen and (max-width: 607px){
  #hero-slider .tp-bgimg.defaultimg {
    background-image:none !important;
  } 
  .e50-9.x-off-canvas, .e50-9.x-off-canvas .x-off-canvas-content{
    padding:30% 0;
    font-size:20px;
  }
  .play-btn{
    font-size:90px !important;
  }
  .marketing-title{
   margin-top: 23px !important;
 }
}

The css will only work in screens smaller than 607 pixel wide.

#6

Do you know why It is still showing on mobile then? It shows for the first second then the correct mobile slide appears. How can I fix that please?

#7

Hi Jennine,

Your navigation visibility is set to be hidden on screen-width 601px, if need to adjust this because of tablet’s screen-size 979px and some iPhones that have larger screen view than 601px on landscape view.

Navigate to Slider Settings > Navigation > Thumbs and look for the Visibility options.

Slider Navigation

Hope it helps,
Cheers!

#8

Would you mind looking at what is happening on mobile?
Here is the url: https://lbylfilms.net
It appears… then disappears right away. It wasn’t doing that before. I don’t want it to appear at all on mobile at all

#9

Hey @Jennine,

I loaded your site on my phone and I didn’t see the navigation. Please try clearing your browser’s cache and also check in incognito and other browsers.

Thanks.

#10

Hello,
my concern is not with the navigation. It is the first slide on the carousel. the background image that i have hidden on mobile is appearing for the first second… then disappears as it should. my question is…why is it showing up at all? It shouldnt be. I have display: none on it.
Thank you

#11

Hi Jennine,

This is what I see when the page load on mobile:

Do you mean you wanted to have the slider not display on mobile at all? Kindly provide some clarification so that we can check it.

Cheers!

#12

please see attached screenshot. Thank You

#13

Hello @Jennine,

Please update your custom css and use this:

/* media queries */
@media only screen and (max-width: 767px){
  #hero-slider .tp-bgimg.defaultimg {
    background-image:none !important;
  } 
  .e50-9.x-off-canvas, .e50-9.x-off-canvas .x-off-canvas-content{
    padding:30% 0;
    font-size:20px;
  }
  .play-btn{
    font-size:90px !important;
  }
  .marketing-title{
   margin-top: 23px !important;
 }
}

We would loved to know if this has work for you. Thank you.

#14

i moved the css fo background image to the media querie above it and that worked. Thank you

#15

You’re welcome!
Thanks for letting us know that it has worked for you.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.