Centralization problems in Breakpoint Mobile

Design help General
1

Hello, I’ve recently been working with the platform and I’m finding it difficult to make everything centralized for mobile.
This site was set up by an agency and now we are changing it internally and these blocks also had a movement that when I changed the image they disappeared.
I don’t know if I have to put them in a div block and I also don’t know how to make a div block.
If anyone can explain it to me

Translated with DeepL.com (free version)

1
11920×1223 123 KB

2

Hi Kathia,

I’m seeing at least 3 problems in the layout,

  1. the button overlap at top
  2. The arrangement of the element in the middle is probably not aligned how you like
  3. The two boxes at the bottom are not expanding to fit the content

The original designer should have make the site responsive for you, however if you’re changing the content it will affect some layout decisions they’ve made.

Each of these are different problems with different solutions, I would recommend you go back to the designer or hire a new one to help you with these, Webflow, HTML and CSS are a lot to learn.

However if you want, you can share your published site link and your readonly designer link and the community might be able to help with specific parts of these repairs.

1 Like
3

this is the reading link

4

For that top button, the problem is the negative top margin setting which cases it to overlap.

  1. Select Mobile Landscape breakpoint here
  2. Select the button element
  3. On the style panel, find the top margin setting, it will show negative, click it
  4. Click Reset to remove that

image
image1920×1060 111 KB

For your boxes at the bottom, the problem is your grid;

  1. Again Mobile Landscape breakpoint
  2. Select the grid element
  3. In the style panel next to the Grid row and column settings, click the little wrench icon, it will enter grid configuration mode
  4. On the right side panel you’ll see the first row is 38% high, click and change that to 50% high
  5. Click the Done button

image
image1920×1060 111 KB

For the 3 overlapping positioned images, I would redesign this section however you can try to make it work “well enough” just by adjusting the positioning of each image.

  1. Again Mobile Landscape breakpoint, the misalignment starts here
  2. Select an image and adjust it’s positioning using the padding settings [5]. This is not the right way but without a redesign it’s what we have to work with, and it should work for your purposes.
  3. Do the same for the center image
  4. Do the same for the rightmost image

Note that in the rightmost image I think it’s the bottom padding that will affect its positioning most. Use small adjustments, only where needed.

Likely you’d then want to switch to Mobile Portrait [1] and repeat this process for this section to get the best alignment you can.

image
image1920×1060 134 KB