www.wysiwygwebbuilder.com

Hello all,
I have a site I've been working on that displays unexpected behavior on smaller screens. I am using a layout grid divided into 6 cells, one for each picture near the bottom of a page. (so a row of pictures) When viewed on a small screen only the first picture is centered, then the rest, which are now displayed as a column instead of a row, are all off to the left. I have checked the layout grid properties, it is set to centered, as is the grid below it. I can't find what is causing the pics to not be centered. Any help figuring it out would be much appreciated!
The site is portagratitude.com

Did you open the layout grid properties at the breakpoint when the grid switches to a column and check each column to make sure it is set to centered? Based on what I see they are set to left not centered. Also, I noticed that your images are not set to full width which cause them to overlap each other as it gets smaller. If you set them to full width, they automatically center and scale when they get smaller.

I did check the layout grid properties, but not sure how to check them conditionally. I'll set them full width and see if that helps, Thanks so much for the quick reply! ******UPDATE***** I set the pics to "Full width" but they still load to the left. How do I check the grid properties when the breakpoint is reached?

To be able to help you, I need a DEMO project so I can see all your settings.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134

What is the breakpoint of the grid? Do you have a page breakpoint that is the same or lower? If so, go to the page breakpoint and open the grid properties and check it there.

I added a breakpoint at the 480 the grid was set to, I verified that the grid cells were set to "center", but every picture except the first one still loads left. I also added some margins at the bottom of each pic but they don't seem to be loading with any margin between the pics.

Here are the project files, I'm not sure how I'd duplicate this as a one page example.

https://drive.google.com/drive/folders/ ... sp=sharing

https://docs.google.com/document/d/1suo ... ue&sd=true

I took a look at your index and FandF page. The images all look centered to me. I do not see any left justified.

However, 1 issue I see is you have a breakpoint (1400px) that is bigger than your default. Your breakpoints should NOT be bigger than your default which is 970. If you are wanting a 1400px layout then you need to make the default 1400px and go down from there (ex: 1400px, 970px, 768px, 480px).

Another suggestion is to make sure your images in the grid are the same size to start with. This way when the browser shrinks they all shrink at the same size and it looks uniform. You notice it more when it's vertical as some images start to shrink before others.

Thanks Crispy, odd that on my phone (android) the images always end up left except the first one, I can't shrink desktop browser windows small enough to make them load vertically, but with developer mode I can and get the same effect. I'll try making all the pics the same size to see if that helps. Thanks again, I appreciate it.