Images not centered in smaller viewport.

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Fredl
 
 
Posts: 109
Joined: Tue Feb 21, 2017 10:15 pm

Images not centered in smaller viewport.

Post by Fredl »

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
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Images not centered in smaller viewport.

Post by crispy68 »

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.
Fredl
 
 
Posts: 109
Joined: Tue Feb 21, 2017 10:15 pm

Re: Images not centered in smaller viewport.

Post by Fredl »

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?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Images not centered in smaller viewport.

Post by Pablo »

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
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Images not centered in smaller viewport.

Post by crispy68 »

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.
Fredl
 
 
Posts: 109
Joined: Tue Feb 21, 2017 10:15 pm

Re: Images not centered in smaller viewport.

Post by Fredl »

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
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Images not centered in smaller viewport.

Post by crispy68 »

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.
Fredl
 
 
Posts: 109
Joined: Tue Feb 21, 2017 10:15 pm

Re: Images not centered in smaller viewport.

Post by Fredl »

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