Elements misaligned when viewing the website on half screen

Ask the community
,
1

I am using Wix studio to build a website for my brand. The elements seem aligned on different screen sizes so far. However, after publishing, when I tried to view my website on a split screen, some elements are misaligned and some fonts are necessarily big. So far, I tried increase the number of breakpoints and also group the elements into sections and containers. However, it was not really helpful.

2

Hi, Ann_Don_Low !!

Are you using the “Stack” feature in Wix Studio? :thinking: By using the Stack feature, you can group elements together like a container and set the distance between them (either vertically or horizontally). This makes it easier to achieve the layout you see in the editor on the live site as well. :wink:

3

Hi @onemoretime

Thanks for the reply. I have tried using the “stack” function and it worked. However, some of the content on the page are now hidden under the footer on a split screen. Do you happen to have a solution for that?

4

I’m glad to hear that the stack feature worked well for you. :rofl: I’m not quite sure what you mean by a “split screen,” but if the content is being hidden under the footer, it’s likely that setting an appropriate margin at the bottom of the content can create some space between it and the footer, which should prevent any overlap. :wink:

5

Hello,
Check for Fluidity in Sizing: Ensure that you are using percentages or “vw” (viewport width) units rather than fixed pixel sizes for element widths and font sizes. This allows elements to scale more effectively on dynamic screen sizes like split screens.

Adjust Font Sizes with Media Queries: Try manually adjusting font sizes using custom breakpoints or CSS rules based on the screen width. This can help control large font sizes when the screen width shrinks.

Set Max-Width for Containers: Apply a maximum width to containers to prevent them from expanding too much on wider split screens. This can keep your layout more stable.
Use Flexbox/Grid for Layout: If you’re not already using Wix’s Flexbox or Grid options, consider switching to them. These layouts are more responsive and often handle changes in screen size more gracefully than simple containers.
Best Regards
katty867