Completely different layout in live

Hi all,

The first snippet is how I create it, the second image is on how it looks on the live URL…
Both on the same device, I just started to use Studio, I normally work in the normal WIX site builder. I wanted to check Studio, but not impressed so far tbh.

Anyone know how this is happening? I do understand that there can be differences but this is a lot lot

  1. Either divide the section into 2 cells - and place the content in them.
  2. Or turn on the scaling for text (paragraph) in the auto mode, and remove the min/max values.

In general, I recommend setting aside a few hours of time to study the “base”.

1 Like

Hi there!

I felt the same when I first tried Wix Studio. Yes, it it annoying at first but once you take the free course available on YouTube and understand docking, stacking elements and sizing settings, it will get easier. It took me about 2 hours to watch the course and then 2 sites later, I felt pro-efficient in Wix Studio :smiling_face:

I think the issue here has to do with item alignment. Turn the text elements in the top section into a stack and align it to the centre. Turn the section scaling settings back to scale proportionally. It looks like you’ve set a max height for the section and that’s why the eyebrow copy doesn’t appear on the second picture (unless you just screenshoted it that way).

Split the second section into 2 columns using an Advanced CSS Grid. Set proportions to 3:1 (or something similar). Align the paragraph to the center of the column or wherever you want it to be. You can also dock it to the left and set some padding. The picture in the second column looks like it’s either aligned to the center or stretched to take up the whole cell.

// In my experience, these issues occur when there are too many advanced settings for each section and element. I struggled with that initially. But the more I learned, the more I found that the fewer advanced sizing settings, the better.

Hope it helps :four_leaf_clover:

1 Like