Help with cards

[Jerry]

Hi everyone,
I’m hoping someone can help me with an issue I’m having with cards inside LayoutGrids. Everything works at all breakpoints except 375px.

In LayoutGrid1, the two cards have proper spacing between them, but in all the other LayoutGrids I can’t get the same spacing to appear at the 375 breakpoint. I’ve checked my settings and I’m sure it’s something I’ve overlooked, but I can’t track it down.

Here’s the project file if anyone wants to take a look:
https://www.edesignsplans.ca/share-fold ... (2026).wbs

Any help would be appreciated.

[Bluesman]

Hi Jerry. At first you shall correct the page structure so the "Default" screen is bigger than the largest breakpoint. Default shall always be the biggest.
Then it's a little fuzzy for me to solve but I can see that in some breakpoints you have column gap in the "Card Container" and in some not, so that's why the gap differs. Think you have to clean it up some.
Cheers

[Jerry]

thank you for your relpy.. as you can tell i am scholar with these stuff.. lol

[AliGW]

Do you really need so many breakpoints?

[Jerry]

Thank you, Bluesman and AliGW, for your help.
I deleted all the breakpoints as AliGW suggested.

I’m great at drawing construction and building plans, but web design definitely isn’t my strongest skill. Maybe at my age (72) i lost too many brain cells. LOL
My current website was built without flexgrid layouts—just breakpoints—and now I’m trying to modernize things a bit.

I’ve been working on this page for a week, trying to create a solid starting point that I can apply across the rest of the site. At this point, I think my brain is about to break.

If anyone can take a look at the sample page I uploaded to the shared folder and point me in the right direction on how to properly set it up, I’d be incredibly grateful.

My default page width is 1260, and I’m using a Master Frame also set to 1260. I’d like the layout to break at 1024, 768, and 375.
I uploaded the WBS file and 3 images in order to explain myself better. They are as follows:
https://www.edesignsplans.ca/share-folder/1024-size.png
https://www.edesignsplans.ca/share-folder/768-size.png
https://www.edesignsplans.ca/share-folder/375-size.png
https://www.edesignsplans.ca/share-fold ... (2026).wbs

Thank you
Jerry

[AliGW]

I am using Easy Breakpoints in my latest site, and I have only one where I want the site to break for mobile phone screens.

Did you see this just recently?
https://www.wysiwygwebbuilder.com/commu ... p?t=101666

If you watch the tutorial, it might help.