Mobile View: Slider Size

[kaneidentity]

Hello! I have opted to disable mobile styling, and now have the mobile view copying desktop view. However, the gallery slider in my posts is extremely large and zoomed in on mobile. It only shows the center third of the first image. Is there a way to minimize the gallery slider on mobile, or completely copy the way it looks on desktop? Preferably, I also want to show a portion of the next/previous(left/right) images so that viewer knows to swipe (just like desktop). *Edit: I like the slider image sizes on desktop and would prefer any possible custom css to only affect mobile view, please!

Also, is there a way to enlarge the hand swipe indicator for touch screens? By default, a small hand icon in the center fades away one touch. Can I increase its opacity to 100%, increase icon size, and/or have it re-appear after swiping to a new image?

Thank you so much

[SeaTheme]

Hi,

Did you talk the single gallery post? Is “Slider” or “Fullscreen” template? Could you please leave the page URL, thanks!

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[kaneidentity]

This reply has been marked as private.

[SeaTheme]

Hi,

I noticed the “Enable Mobile Layout” is disable on Theme option > Mobile.

If you don’t want the mobile layout, please add the CSS to minimize slider image:

@media (max-width: 767px) {
.single-portfolio-fullwidth-slider .owl-carousel,  .single-fullwidth-slider-carousel-img, .single-portfolio-fullwidth-slider .size-all,  .owl-carousel .owl-item img.single-fullwidth-slider-carousel-img,  .owl-carousel .owl-item img.size-all { max-width: 100vw; height: auto; }
}
/*To increase hand swipe icon*/
.swipe-tips { 
    transform: scale(1.5); 
    opacity: 1;
}

The left/right arrow is added on mouse cursor, so there is not on touch screen.

Regards!

[kaneidentity]

Hi thank you for the help, but I have added the CSS and the mobile view is still the same. When I look on an android phone the gallery slider images are still too big for the screen.

Also, I meant the hand swipe icon for touch screens; I was wondering if I could make it bigger or change the opacity. There is an option to show hand swipe icon for touch screens only. I am fine with the arrows for desktop.

Thank you!

[SeaTheme]

Please stop the cache plugin to check.
I have pasted the swipe icon css also. The CSS doesn’t work.

[SeaTheme]

This reply has been marked as private.

[kaneidentity]

This reply has been marked as private.

[SeaTheme]

Please update CSS:

.single-portfolio-fullwidth-slider .owl-carousel .owl-item img, .single-portfolio-fullwidth-slider .owl-carousel .owl-item img.size-all, .single-portfolio-fullwidth-slider .owl-carousel .owl-item img.size-arnold-standard-thumb-medium, .owl-carousel .owl-item img.single-fullwidth-slider-carousel-img { max-width: 100vw!important; height: 50vh!important;}
.single-portfolio-fullwidth-slider .owl-carousel, .single-fullwidth-slider-carousel-img, .owl-carousel .owl-item img.single-fullwidth-slider-carousel-img, .single-portfolio-fullwidth-slider .owl-prev, .single-portfolio-fullwidth-slider .owl-carousel .owl-controls .owl-nav .owl-next, .single-portfolio-fullwidth-slider .owl-carousel .owl-item img, .single-portfolio-fullwidth-slider .owl-carousel .owl-item img.size-all, .single-portfolio-fullwidth-slider .owl-carousel .owl-item img.size-arnold-standard-thumb-medium {height: 50vh!important;}

/*increase hand icon size*/
.swipe-tips { 
    transform: scale(3); 
    opacity: 1;
}

[kaneidentity]

Thank you very much! The image vertical height ratio didn’t change but I’ll find a away around it. The hand swipe is perfect, thank you again!

[Author]

Posts