So I’m currently optimizing my website for mobile, and I running into a few issues. Right now, I’m working on the homepage. When I press preview, there is a weird gap on the right side of my elements, which is more seen in the carousel & achievements section, and it continues even when I optimize for other phone sizes. I believe it has something to do with my testimonies section and the grid layout, but I have tried everything, and I can’t seem to understand the issue. In general, I feel that everything looks uncentered.
Secondly, on one of my program pages → Recovery, the drawings on the side are zoomed in.
how can I make them smaller so you can see the full image, but in mobile? I attached a screenshot of what I’m seeing.
It’s your Testimonial Column Light section, you have a fixed width plus margins that exceeds the screen width.
Do you mean like this?
There are actually a lot of things you’ll need to clean up in your layout here to avoid conflicts but the general approach is to re-orient the flow vertically.
Thanks for your comment. Could you show me how I should modify the testimonial section? I was trying to fix it to auto and remove margin sizes, but the gap persists, and it looks like the issue is with the testimonial grid. everything is still the same, but if you could share a screenshot like you did for the program page, I would appreciate it!
It’s quite a bit of reconstruction. A starting point is that your Container 17 is width 100vw, but its parent section has margins and padding, so you’ve already overflowed your page width right there.
Inside the footer, you have a similar problem with footer row, where the width is 100vw but the ancestor elements increase that width requirement with padding.
