Home Forums Arnold WordPress Theme Mobile View: Slider Size

This topic contains 9 replies, has 2 voices, and was last updated by  kaneidentity 1 month ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #16697

    kaneidentity
    Participant

    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

    • This topic was modified 1 month ago by  kaneidentity. Reason: additional details
    • This topic was modified 1 month ago by  kaneidentity.
    • This topic was modified 1 month ago by  kaneidentity.
    • This topic was modified 1 month ago by  kaneidentity.
    #16717

    BWSM
    Keymaster

    Hi,

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

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #16722

    kaneidentity
    Participant
    This reply has been marked as private.
    #16723

    BWSM
    Keymaster

    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!

    #16727

    kaneidentity
    Participant

    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!

    #16728

    BWSM
    Keymaster

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

    #16729

    BWSM
    Keymaster
    This reply has been marked as private.
    #16740

    kaneidentity
    Participant
    This reply has been marked as private.
    #16743

    BWSM
    Keymaster

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

    kaneidentity
    Participant

    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!

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Mobile View: Slider Size’ is closed to new replies.