Home App Docs Blog Github

Carousel Formatting on Mobile

Builder content link

Builder public api key
e83ac730d3f24ecdbc6c1fe536dfc238

What are you trying to accomplish
Trying to fix carousel margins / view on mobile view

Code stack you are integrating Builder with
Shopify

Hi @daryllheiberger! A few things I noticed:

  1. The “Carousel” layer has a fixed height of 534px. If you remove this, the contents won’t be cut off.
  2. The text block within the"Evac" layer in the “THE MOVER MAX…” slide is overflowing into the next slide. If you give the text block a width (e.g. 100%), this won’t occur.

The alignment of the whole carousel looks resolved on my end, not like the screenshot above. Is there anything else that you need help resolving with the carousel?

Okay got the text to stop bleeding over! However still having some formatting issues with the column setup (I think that may be the cause as I can’t seem to get the text to be on the same starting spot as the check mark).

Also having some spacial discrepancies between image and bullet point list on the slides.


Screen Shot 2021-11-02 at 10.19.33 AM

On the “Evac” layer, can you try changing the child layout to row and in the CSS properties section of the styles tab, can you change the style flexWrap: wrap to flexWrap: nowrap?

KK so i am here but for resason it’s not allowing me to select Row (it’s clinging to grid format)

@daryllheiberger Okay! In the CSS properties section, you should be able to change the layout.

Thanks! I actually am just going to swap this section to a diff format but this is extremely helpful for other parts.

1 Like