www.wysiwygwebbuilder.com

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!

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.

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?

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

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.

See also:

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

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

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

Alan

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

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

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..

@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.

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!

Crispy68

Did you have a chance to look at the revised test site with images that I posted?

It's hard to make different size images look symmetrical in a layout especially when you want the images to scale. Different size images don't scale the same way.

Since you are mixing landscape images with portrait images, I personally would make them all the same size. This means on the portrait images you would have to add space on either side of the pics to match your landscape images. It will still look the same visually, but they will all be symmetrically the same (just like my demo was) and thus in a grid they will scale nicely. Ex: make them all 800x600.

Unfortunately, setting the height as fixed doesn't work as the images will still scale outside of this.

I would also advise against having images that are 3132x2169 as this will slow down your site especially when you have multiple pics on a page this large. You only need to make them as large as they need to be on the screen.

Thanks Crispy68

Makes sense, I was just hoping to not to have to modify every single picture but looks like that's what I have to do..
And since I'm doing that and renaming them, is there a preferred naming convention or style I should use for SEO purposes? I mean like type in the manufacturer's name and, the model number of the item, dashes between words or underline etc.?

And when I say SEO, i mean help google search rank me higher..

And when I say SEO, i mean help google search rank me higher

There is a whole list of SEO tools/tutorials at the following Online Tutorials see and read from Search Engine Optimization (SEO)
Also see my reply and suggestions (two cents)
Help with SEO

Okay will check out SCO section,

Moving along on my sample project, why is it when I added a buy it now button to the waterfall cell does that button get cut off in the default view only?
I have tried shrinking the size of the waterfall but that does not seem to matter..
Also I'm using all responsive text now, and sometimes when I move text out of a flex grid cell and manipulate it and move it back in into the cell I cannot shrink the height of the text container back to where it was even though I haven't added any lines just change the text and moved it around. I can send an example of this if needed also

https://pixell.com/download.php

The waterfall image is taller then the other images.
I think it's better to use layout grid in this case. There is no reason to use a flex grid, it only makes the layout more complicated.

Or else add this code between the head tags of Page HTML:

Actually all images are 800x600.

The code you sent does work, but I'm not sure why I need it?

I've no problem using layout grid, I am building a simple site here. I will experiment with it.
Thanks for your help

Ok, I see now you have added a top margin for Text14.

Okay, maybe that was it, I went out and tried layout grid.

But it looks like using a layout grid and you have different breakpoints you can only set the number of columns in the layout grid to a fixed number and it goes across all breakpoints.
Doesn't make any sense to me but maybe I'm doing something wrong.??
I like the way flex grids operate and I think I'm going to try to stay with that.
And if it's as you said on my text 14 then it's my fault..

Obviously I'm just going through trying to figure out how each container and tool works in WWB works before actually start building the site, so thanks for hanging in with me on these rudimentary questions.

I'm going to have more

I reloaded the example I sent you and text 14 did have a top margin, (My bad) and when I removed, seems to be working fine now, so that is solved.
On to the next question
How do I have responsive text on the same line as the PayPal button or indeed two different responsive text boxes side-by-side on one line inside of a flex grid?

How do I have responsive text on the same line as the PayPal button or indeed two different responsive text boxes side-by-side on one line inside of a flex grid?

Once you have enabled "Responsive Text" then it will apply to all the text objects...
See the following.
How to create Responsive Text?

You can set a different number of Layout Grid columns in breakpoints.
https://www.wysiwygwebbuilder.com/layou ... anced.html

Why can I not move these layout grids up and down now only front and back?
I can't drag them in the object manager either.. I was able to do this, but not now for some reason

https://pixell.com/download.php

Second question, what is the best object to use to create space on top of my top flex grid.? (Essentially adding padding)

You can re-arrange layout grids in several different ways.

This is documented in the FAQ:
viewtopic.php?f=10&t=71391

You can use margin properties to add spacing. See also the FAQ.

I have my index page responding with breakpoints the way I want it.
Now I want to create a master page/frame, which I did and that page is called masterframe. I created a content placeholder in that page and I am pointing my index page 2 that master frame but now the images inside my index page do not work at the breakpoints correctly, what am I doing wrong see my link

https://www.pixell.com/download.php

In flexible layouts, the content place holder's overflow property must be set to 'floating'

Related tutorial:
https://www.wysiwygwebbuilder.com/master_frame.html