How do I get content to stop overlapping as screen size decreases?

Ask the community
, , , ,
1

How do I get content to stop overlapping as screen size decreases?

I’ve tried stacks, columns, containers… how do I make the boxes on my website behave like normal boxes on a website? I’m talking about div display:block or something like that.

Why is it even possible to have containers overlap? When does this even happen in a normal website? What setting am I missing?

Should I be using something other than cells or stacks or containers??

Please help me. By god I hate Wix right now.

Product:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor, Editor X.]
I’m currently living in HeII at editor dot wix dot com/studio whatever one that is. Wix Studio I think.

What are you trying to achieve:
I want to show a box
beside another box,
and as the screen gets smaller
the boxes push each other on to separate rows and NEVER OVERLAP EACH OTHER.

What have you already tried:
Containers, cells, sections. Every layout and responsive option I can find. Columns. column widths. column separation. stacks. Help articles. Useless blogs. YouTube videos.
I’ve tried creating a new section from scratch, hoping maybe some phantom setting that was causing the overlap would be left behind.

Additional information:
I am grateful for any help you can provide.

2

depending on how you have set up the boxes.

You can adjust the stack to be vertical instead of horizontal on the lower breakpoints
You can adjust the Grid to be rows instead of coloumns on the lower breakpoints

3

Thanks, Dan. How can I make it so content doesn’t go off the screen?

I’m trying to build it now by only using stacks.

The cells don’t seem to be any help. The right-most one keeps getting cut off screen.

I’m abandoning containers altogether. They don’t seem to be of any use that I can find.

I’ve also tried flexboxes and they seem to be useless if you care about the size of the contents.

4

do you have the elements set to scale proportionally ?

5

I’m trying to keep the profile boxes (image, title, line, button) the same size because I don’t want the photos stretching huge on big screens, or the font getting comically large.

Screenshot 2024-03-24 164857
Screenshot 2024-03-24 1648571158×878 212 KB

Why can’t I keep the box 300px wide x 400 px tall, and just not have them overlap or go off of the screen? Is that not possible?

6

Also, should I be setting margins and/or padding on sections, cells and/or stacks?

I’m used to building a site with CSS where you can simply have your stuff align throughout a website, none of this % anchor from the sides.

7

yes, I always set padding where required.
in the screen shot above you are at 1062px which is in the tablet range. I would swap the boxes to be vertical or reduce in size to fit horizontal.