Text cropped in slider component

Hi everyone :slightly_smiling_face:

I am using a slider component on mobile, to display a combination of Lottie files and text. On the 5th and 6th slide it seems that the text is cropped. I can’t figure out why this is happening, it doesn’t seem to be the height of the container or a padding issue.

Can anyone have a look and see something that I may be missing?

Many thanks!!!


Here is my site Read-Only: [LINK][1]

Hey @teeny,

For this setup you only have 6 boxes. I wouldn’t use grid for this, just use flexbox. And remove all pixel sizing, that won’t scale with content. Try to refrain from that because it locks objects in the DOM. Documents naturally flow from top to bottom. If you lock boxes with pixels it will break the document flow. Once you remove the pixel sizes and grid, the content will flow better. :slight_smile:

-G.J.

1 Like

Hey @garymichael1313 :slight_smile:

So I am using a grid on desktop but not on mobile for this. I hid the grid on mobile and used the slider component instead to show the content that you see on the desktop grid.

I tried using flexbox but the issue still remains that the paragraph section is somehow cut off, even if I try to increase the height… there is also nothing within that container that is hiding the text.

Thanks!

I found the issue :smiley: It was the height of the slider that was cropping the text. Silly me!

Good deal, glad you got it. See ya :slight_smile:
-G.J.

1 Like