Galleries Responsive Design

This topic contains 16 replies, has 2 voices, and was last updated by  CTHthemes 4 months ago.

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #17987

    sektor
    Participant

    Supported

    Hello,
    I have problems with the image galleries:
    – on the PC the ribbon gallery only works correct after reloading the page
    – on Smartphones the gallerie doesn’t appear correct. The pictures are not adapted, the second picture is cut.
    I’m using Joomla 3.8.0 with php 7.1.11

    Best regards
    Martin

    #17990

    CTHthemes
    Keymaster

    Hi, send me the page link to check. Thanks.

    #17991

    sektor
    Participant

    Supported
    This reply has been marked as private.
    #17993

    sektor
    Participant

    Supported

    Do you also need a backend-access?

    #18005

    CTHthemes
    Keymaster

    Hi, please try this fix:

    Add the code bellow to Header Custom Scripts field on Template Style manager -> Custom Code tab

    
    <style>
    @media (max-width: 760px) {
      .oyster_ribbon,
      .oyster_ribbon > .fs_grid_gallery, 
      .oyster_ribbon > .fs_grid_gallery > .ribbon_wrapper {
         height: auto !important;
      }
    }
    </style>
    
    #18013

    sektor
    Participant

    Supported

    Hi, the sliders now work on smaller devices, but not as nice as in your examples.
    On larger screens, the sliders only work correct after reloading the page. Do you have a solution for this problem?

    #18040

    CTHthemes
    Keymaster

    Did you mean when resize browser?

    #18041

    sektor
    Participant

    Supported

    Yes, the slider does not adapt dynamically to the browser size.
    And the slider only works correct after reloading the page. Try it yourself.

    #18053

    CTHthemes
    Keymaster

    Hi, please add the script bellow to template’s theme.js file ( ribbon_setup function ): http://prntscr.com/howstw

    
    var window_h = jQuery(window).height();
    
    #18066

    sektor
    Participant

    Supported

    Hi, the problem is still there:
    1. The slider only works correct after a page reload
    2. The slider is not responsive

    #18068

    CTHthemes
    Keymaster

    Hi, would you send me a screenshot about the error?

    And use this style to the Custom code tab instead.

    
    <style>
    @media (max-width: 760px) {
      .oyster_ribbon,
      .oyster_ribbon > .fs_grid_gallery, 
      .oyster_ribbon > .fs_grid_gallery > .ribbon_wrapper {
         height: auto !important;
      }
      .oyster_ribbon > .fs_grid_gallery {
        width: 100% !important;
      }
    }
    </style>
    
    
    #18071

    sektor
    Participant

    Supported

    Hi, here the screenshot. I marked the areas which disappear from the window.

    Attachments:
    You must be logged in to view attached files.
    #18080

    CTHthemes
    Keymaster

    Ok, use this style

    
    <style>
    .oyster_ribbon > .fs_grid_gallery {
         max-width: 100%
    }
    @media (max-width: 760px) {
      .oyster_ribbon,
      .oyster_ribbon > .fs_grid_gallery, 
      .oyster_ribbon > .fs_grid_gallery > .ribbon_wrapper {
         height: auto !important;
      }
    }
    </style>
    
    #18090

    sektor
    Participant

    Supported

    Thank you, the slider now is responsive.

    I still have the problem that the slider does not work the first time the page is opened. The slider only works correct after a page reload. I made a screenshot.

    Attachments:
    You must be logged in to view attached files.
    #18100

    CTHthemes
    Keymaster

    Because your images are too large to load. So please try this fix: http://prntscr.com/hpvif3

    Replace

    
    ribbon_setup();
    

    with

    
    $('.oyster_ribbon').imagesLoaded(function(){
       ribbon_setup();
    });
    
    #18106

    sektor
    Participant

    Supported

    Perfect. Everything works.
    Thank you very much!
    Best regards form Germany
    Martin

    #18115

    CTHthemes
    Keymaster

    You are welcome.
    Merry christmas

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

You must be logged in to reply to this topic.