upfront not responsive

Hi, I seem to have a problem with Scribe. I tried to change the large image in my homepage into slides of 3. After I changed it and saved. It is still the large image not the slides. Please advise. Urgent!

  • Luís
    • Support

    Hi Mei ,

    Hope you're doing well today!

    Firstly, sorry for my late reply and all the problems it may have caused.

    Slider element uses adaptive layout and responsiveness is something that your developers are working to future releases.

    https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

    However, I can suggest a workaround:

    1) Go to the Slider element and click in the "Settings" button (gear icon);

    2) In the "Appearance" tab, click in "Edit Preset CSS";

    3) It will open a CSS editor, so, please add this CSS code:

    .uslide-image img {
    max-width: 100%;
    min-height: unset !important;
    }

    Cheers, Luís

  • Luís
    • Support

    Hi Mei ,

    Hope you’re doing well today!

    Upfront always re-creates the images based on the element dimensions, in this case the Slider dimension. However, this process resizes and crops the image, to avoid stretch.

    So, you can see the image cropped but not stretched, maybe the best option should be upload the images with the same size of the element (1050px x 650px).

    Also, can you add this CSS code in the left panel, Theme Settings -> Global Theme CSS, in order to correct the spaces in mobile:

    .upfront #module-1468064738636-1409, .upfront #uslider-object-1468064738635-1594 {
    min-height: unset !important;
    }

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís
    • Support

    Hi Mei ,

    Hope you’re doing well today!

    Firstly, sorry for extreme delay in the reply.

    I tested this on an android device and I was unable to replicate. Not sure if can be related to iPhone.

    Try add a media query specific for iPhone or iPhone 6+ in the Global Theme CSS:

    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : portrait)
    {
    .upfront #module-1468064738636-1409, .upfront #uslider-object-1468064738635-1594 {
    min-height: unset !important;
    }

    }

    or

    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 3)
    and (-webkit-device-pixel-ratio : 3)
    {
    .upfront #module-1468064738636-1409, .upfront #uslider-object-1468064738635-1594 {
    min-height: unset !important;
    }

    }

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.