Modifying the height of mobile slider

Comments

18 comments

  • Avatar
    Jinesh from EcomEthos

    I was able to do this for one store.  Requires editing code.

    Make copy of slider sections, one for mobile another for desktop. Then add class like "mobile_hidden" for desktop section and class "desktop_hidden" for mobile section.

    You will have to add css classes to hide those sections based on screen size

    Then you can have different sections for mobile and desktop

    1
    Comment actions Permalink
  • Avatar
    FCM

    Thank you Jinesh!

    Could you tell me please which file I have to work with?

     

     

    0
    Comment actions Permalink
  • Avatar
    Paul

    I would also love to know what you did Jinesh.  I made a copy of the slider section, altered some CSS, and had a bit of luck, but it seems that there are several mods to flexslider that also need to be made and I didn't want to goof it up.

    I would love you see the code that you utilized!

     

    Thanks.

    0
    Comment actions Permalink
  • Avatar
    Jinesh from EcomEthos

    Hi Guys

    Here is what I did.

     

    1. Go to sections folder and open and copied code in slideshow.liquid
    2. Create 2 new sections one named slideshow-mobile.liquid and another as slideshow-desktop.liquid
    3. Also in presets line 267 of each file, change the names accordingly to recognize.

      slideshow-mobile: "name": "Slideshow Mobile",
      slideshow-desktop: "name": "Slideshow Desktop",

    4. Copy code from slideshow.liquid to these 2 new sections
    5. Go to slideshow-desktop.liquid and add text mobile_hidden (inside quotes as shown in the screenshot) in the first line. This is an additional class we are adding to that section and this will hide slideshow-desktop section on mobile
    6. Similarly, go to slideshow-mobile.liquid and add an additional class named desktop_hidden and save section. 
    7. Go to assets and styles.css.liquid and add this code at the end and save
    @media only screen and (min-width: 799px) {
    .desktop_hidden {
    display: none !important;
    }
    }

     

    That's it. This will solve your slideshow issues. This change will create additional sections. One will display only on mobile and another will display only on desktop.

    So you can use different sized banners for desktop and mobile

    PS. Make theme backups before doing this. And thoroughly test before taking this live.

     

    Hope this is helpful

     

     

     

     

     

    1
    Comment actions Permalink
  • Avatar
    Paul

    That is quite helpful!  I was getting way too involved.  I was trying to make responsive viewport heights etc.  It means creating separate media for mobile and desktop, but this is a much simpler approach.  Thanks!

    0
    Comment actions Permalink
  • Avatar
    FCM

    Thanks, Jinesh!
    I tried what you suggest.
    I believe I need to do certain changes in the file slideshow-mobile.liquid in order to define the size of the mobile banner image.
    Which parameters do I need to modify?

     

     

    0
    Comment actions Permalink
  • Avatar
    Jinesh from EcomEthos

    No, you don't need to define the size of the mobile banner image. You just have to upload whichever size you want when you use the "customize theme" option.

    check the implementation i did on minifirgun.com They are also on retina, they have a broad banner on desktop and a narrow (and longer) banner on mobile.

    0
    Comment actions Permalink
  • Avatar
    FCM

    Thank you very much Jinesh! It works!


    0
    Comment actions Permalink
  • Avatar
    Jinesh from EcomEthos

    Great. :)

    0
    Comment actions Permalink
  • Avatar
    Elias

    Hi Jinesh! Awesome value bomb here.

    Is there a way to perform the same hack in Turbo theme?

    Thanks!

    1
    Comment actions Permalink
  • Avatar
    Elias

    Nailed it! Thanks

    0
    Comment actions Permalink
  • Avatar
    FCM

    Hello guys,

    I am now trying to position the title, subtitle, and the button a little lower on mobile.
    And also to assign a different font color on mobile only.
    Tried creating new styles for flex-caption but no success so far.
    Any suggestions will be appreciated!

    0
    Comment actions Permalink
  • Avatar
    Marcio

    Also in presets, change the names accordingly to recognize.

    0
    Comment actions Permalink
  • Avatar
    Stephen Hu

    I did it in the same way, then I upload a banner. But the mobile is still small and narrow. Can you help me to check it?

    0
    Comment actions Permalink
  • Avatar
    Rob

    I'm am trying to do the same for Turbo, but having some difficulty. 

    Elias - Can you let me know what you did?

    Thanks!

    0
    Comment actions Permalink
  • Avatar
    Elias

    Hi Rob, do you have some coding knowledge?

    Basically you just have to duplicate the slideshow template in sections, then rename it in the schema so you can identify the mobile and desktop sections in the theme customization admin.

    Then modify de CSS file.

    This step by step is perfect: https://help.outofthesandbox.com/hc/en-us/community/posts/360029545753/comments/360004898834

    1
    Comment actions Permalink
  • Avatar
    Rob

    Hi Elias,

    I do have some coding knowledge, but I'm definitely not an expert.  

    I was able to get it to work (mostly) but wasn't sure where to put the code to hide the mobile / desktop in the slideshow-mobile.liquid and slideshow-desktop.liquid, as it was a bit different than the retina theme.

    Rob

    0
    Comment actions Permalink
  • Avatar
    Gotham

    Hi Elias and Jinesh - It seems the version of Retina I'm on doesn't have the slideshow.liquid file. Can you please suggest what I can do to increase the height of the mobile banner. Please see screen shot of the customization panel. Your help would be highly appreciated.

    - Gotham

    0
    Comment actions Permalink

Please sign in to leave a comment.