What grid will automatically do breakpoints?

[Spinner]

I am attempting to build a site that is responsive that does not require manually entering breakpoints.

is there some kind of container (flex grid, card container, layout grid, whatever) with say six segments (pictures and text) at 1920 wide, and as I shrink the width it shrink to three wide on top of three wide, then if I shrink the width further 2+2+2, until it is only one picture wide by six high.
What container type would I use and what settings would I make to force this behavior?

If I have to use breakpoints I will, but in the interest of maintenance I was hoping there would be something that would be automated to do this

I am running WB 19 right now.
Thanks for your help in advance!

[Pablo]

By default, a layout grid (and other containers) will only have one breakpoints for mobile view where the columns will be stacked.
If you want a more advanced layout, then you need breakpoints.

[Spinner]

Thanks Pablo,

Okay fine, understood..

I am now having difficulty keeping the formatting of pictures and text inside of a flex grid
when it goes to the breakpoint. Please see attached test project.

The formatting looks fine inside of WB but when I test publish it loses all formatting, what am I doing wrong?

[Spinner]

I don't see a place to attached my WBS file?

[BaconFries]

I don't see a place to attached my WBS file?

It is not possible to upload directly to the forum for security reasons. To share the .wbs you can do one of the following
1) Upload to your own host/server and provide a url to download from.
2) Upload to One drive or Google drive as before provide a link
3) Upload to the likes of Mediafire and give the generated link.

[Pablo]

See also:

[Spinner]

Okay, makes sense.
Here is a link to my project, bottom link
https://pixell.com/download.php

[alan_sh]

Have you seen my template here viewtopic.php?t=93336

That may give you a decent start to doing what you want.

Alan

[crispy68]

Are you wanting the images to stay a fixed size? or do you want them to scale?

[Spinner]

Alan_sh,
I did look at that, but I think I want my images in a flex grid. And I want to learn at a very granular level which is just to take a simple flex grid and get images to scale through breakpoints while also keeping the text associated with them formatted through the breakpoints.
I'm still confused as to which container would be best for this simple function, but just focusing on flex grid for the moment.
Thanks for replying and if you have any suggestions on my above confusion, your wisdom is welcome as I am a complete newbie on this

[Spinner]

vCrispy68,

I think I would like to have them scale for situations where screen size is not quite at a breakpoint.

As I mentioned above I'm still trying to decide the best container for my need which is just a grid of various products and a picture for each with some associated text and a buy it now PayPal box for each item.

If you download my simple project in the above link I posted you can see what I've built so far and see how lousy it looks at the breakpoint..

I can't figure out why it looks fine in WB at both breakpoints but when you publish it to a browser it looks terrible at the breakpoint, I'm not sure the software is wysiwyg anymore..

[crispy68]

@spinner,

So, there is no 1 way to do this. You could use layout grids, flexgrid or even cards in a card container. It all depends on how complex your layout is going to be.

In looking at your demo, your set up is pretty simple (pic with text below it). My first instinct is to simply use nested layout grids but this may be a bit more complicated until you get used to how they work. A flexgrid would be the next solution but you need to understand flexbox as it uses flexbox which may be why you are seeing some funky results. If you want to be fancier, cards in a card container would be an answer.

In your demo, you have the breakpoint at 1380px (which is an odd breakpoint btw) and is not going to look good on a cell unless you add additional breakpoints. I've created a demo project you can download to take a look at and hope it helps you here.

I've also added a couple of other common breakpoints. Since you didn't include any images with your demo, mine includes 1 general image. I also removed the empty flexbox containers you were using (for spacing maybe?) and just added padding to the flexgrid itself. Always best to use padding/margin for this rather than empty containers. I didn't do anything with the text itself, but I would suggest using responsive text so that when you reach smaller sizes the font is reduced.

[Spinner]

Thanks Crispy68,

Yours looks a lot better than mine does..

I only put one breakpoint in because I was just trying to get one working before I created more.

Sorry I didn't include my images, I have added my images to your demo and posted it back to here: https://pixell.com/download.php

I want to have some fairly high res images in the website (like~1Kx1K or more) so as you zoom on a mobile device you can see the detail, but in my standard viewing (Zoomed all the way out) I want them scaled and contained in each flex box/grid of the same size even though the actual images are different resolutions and aspect ratios.

In this version where I have added my images you can see that the waterfall does not do well once it is published. (its too large and not staying in the cell) I see you have set your height for auto, is this why it's appearing so large because it's a tall image? Do I need to make my heights fixed to accomplish this for what?
Also I see you have set flex direction for Row, why this and not column?
There are just so any settings and combinations of settings in the flex grid properties that I'm having a hard time getting a handle on what to do, your help is much appreciated!