Slider text and image proportions/scaling

  • Resolved bizzy123

    (@bizzy123)


    4 years, 2 months ago

    Hi

    I am trying to create slides where there is text on the left side and an image on the right side, with a fixed overall slide height on all devices, but to keep the proportions of the text and image blocks in relation to the slide the same across devices. At the moment it looks correct on desktop, but on mobile the text is too big. I have changed the adaptive/text scaling settings but then the image is not the correct proportions and it either takes up too much space or the text and image do not display in the correct positions.

    Advice on how to get the proportions on desktop and mobile to match would be very much appreciated. Thank you.

    • This topic was modified 4 years, 2 months ago by bizzy123.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Ramona

    (@nextend_ramona)

    Hi @bizzy123

    You can put text and image next to each other using a two column row:
    https://smartslider.helpscoutdocs.com/article/1811-row

    Mobile devices generally have aroun 375px width. This means that in the best case scenario, you’ll have 187px space to display the text, and 187px to display the image. That’s not much space at all.

    The way you could get the best mobile layout if you would break the row into two lines. So the text and image would display below each other. This way they could have more space to display the content, and that would create a better user experience for your visitors.

    Also, I recommend working with Default positioned layers:
    https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#default
    this way the layers can make the slider bigger on smaller screens, when they need more space, instead of cropping the layers, like Absolute positioned layers do.

    We have a video about the Responsive Settings, which could help optimizing your slider for small screens further. You can watch it here:

    Thread Starter bizzy123

    (@bizzy123)

    Hi thanks very much for your reply.

    So I already have the 2 columns set up with the slider splitting and becoming larger on mobile. I understand it will make the content smaller on mobile but having the two sections on top of each other messes with the look I’m going for, so I’m trying to experiment to see how it would look side by side with the same ratios on mobile.

    Is it possible to do this even if it’s a compromise on mobile?

    Thread Starter bizzy123

    (@bizzy123)

    I think I figured it out after some trial and error. Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Slider text and image proportions/scaling’ is closed to new replies.