Hi, I've been trying to build a peice of UI in site designer which is essentially a six by two CSS grid with some elements sharing multiple cells either in the horizontal or vertical axis. One cell also contains another grid of 1 by 3!. However, I am having countless problems when using site designer for this. Namely:

-Sometimes the preview and the editing window have completely different results.
-Sometimes when I make a change, see its wrong and then change the values back to how they were, the result is not the same as it was previously.
-I find myself basically changing every layout value in the hope that the grid works correctly but I always have parts of the grid scaled completely wrong or not scaling to fit within the grid cells.
-I try every single option but nothing works, its basically like trial and error even though I have watched lots of tutorial videos the settings seem to only work in those very specific cases.

I am tearing my hair out here. Maybe CSS Grid is not the way to go? Maybe Site Designer is not the way to go? Any help greatly appreciated. Thanks

Could you please let us have a look at your project file? We would need to see the problem to be able to find a solution to it.

Here is the project in its current broken state (attached as zip)

..and this is what it is supposed to look like:
https://app.screencast.com/F7JUbNol3exEV

P.S..the forum doesn't let me attach RSD files even though it says.. Your attachment must be one of .RSD

I don't know if you think this is better. I made the text appear properly and added a minimum width for the whole thing, so that it doesn't get squashed at small widths. I also had to reduce the text size for small widths.

I don't know how you are thinking about the display on mobile phones, you'll probably have to make the grid 2x6 instead of 6x2.

If I were to create such a thing, I would have used flex positioning instead of CSS grid. But that is me, I feel I have much more control with Flex.

Hi, thanks for giving it a go but I can see your version has most of the same issues as mine.
-The score icons aren't fully visible in editor
-The score icons disappear in preview mode.

I need to have it shrink at smaller widths for smaller screens so that's why I didn't have a minimum width

I guess I could try flex but its a shame we don't understand why this isn't working. Its really not that complex a set up.

You had complicated it by creating that three-column grid instead of using the columns you already had. I'm not sure why those wee images didn't display in browsers, but as soon as I removed said grid, they turned up. Try this one.

Addendum: I have not removed the minimum width. If you squeeze the table together, it will look impossible. You have to transform the grid into a vertical setup.

Thanks for this! Its looking much better. I guess grids within grids are a no no.

Do you know if there is a way to limit maximum or minimum text sizes? I see you have based the text size on the view width but at some point this start to get either to big or too small.
Cheers

I have been looking for limiting text sizes myself but not found any setting for it. I suggest that you create a breakpoint where you think the text is at the maximum according to your wishes, and then convert from vw to px above that breakpoint. You can of course, also set a minimum font size if you like, using the same method at the other end of the scale.