Split Screen Slideshow dimensions

Store Design

Topic summary

Berlin theme split-screen slideshow spacing and alignment issues on mobile and desktop.

Key issues (with screenshots):

  • Mobile: white gaps between image, text, and ticker in the split-screen slideshow.
  • Both mobile and desktop: center white dividing line doesn’t align perfectly, leaving a visible gap.
  • Footer: user can’t find where to adjust a specific footer section.

Latest guidance:

  • Desktop: no clear line-spacing issue detected by the responder.
  • Mobile gaps attributed to uneven paragraph lengths causing slides to have different heights.
  • Two approaches suggested:
    1. Standardize text content length to make slides uniform.
    2. Add CSS to fix slide height and clamp text lines:
      • Set a fixed height on .split-screen-slideshow__text-slider__wrapper (e.g., 230px).
      • Use line clamping (-webkit-line-clamp: 3) to limit text to 3 lines, ensuring consistent slide height.

Notes:

  • “Line clamp” limits visible text lines to keep heights uniform.
  • Center line alignment and footer adjustment remain unresolved; no code or steps provided yet.

Status: Partial solution provided for mobile; thread remains open for center line and footer fixes.

Summarized with AI on December 23. AI used: gpt-5.
1

Hello,

Theme: Berlin

Website: www.byorto.com

I need help adjusting the dimensions of the split screen slideshow images and text

Screenshot 2024-08-03 104757.png
Screenshot 2024-08-03 104757.png364×643 81.9 KB

On mobile version - there is a “White” gap between the images and text, as well as between the text and the ticker. I want it to be filled completely so no white gaps

Screenshot 2024-08-03 104833.png
Screenshot 2024-08-03 104833.png1239×703 253 KB

On both mobile + desktop the center white line is also doesn’t fit perfectly. Leaves a gap as shown above

Last thing:

Screenshot 2024-08-03 104912.png
Screenshot 2024-08-03 104912.png639×127 3.45 KB

I am attempting to adjust this section in the footer but can’t seem to find where to change it. Any one knows how to do so?

Thank you for your responses and help!

1 Like
2

Hi there,

I didn’t find any issues related to the line spacing on the desktop version.

However, for mobile, the main reason for the gaps is inconsistent content in the paragraphs, which results in unequal slide heights. You have two options:

  1. Change the content to ensure it is more uniform.
  2. Use the following CSS, which restricts the content to 3 lines and sets a fixed height for the slides. You can adjust the line clamp and height as needed:
.split-screen-slideshow__text-slider__wrapper {
    height: 230px;
}

.split-screen-slideshow__text-slider__wrapper .richtext__content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

If you need further assistance, please contact me via email at Mehran.ali5300@gmail.com.

1 Like