Using -970 to set max of layout grid width not working as hoped.

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: 112
Joined: Tue Feb 21, 2017 10:15 pm

Using -970 to set max of layout grid width not working as hoped.

Post by Fredl »

I was having an issue with a layout grid not respecting max width where an image was set as the background. I was given advice to set the max width with a minus sign before the number, which originally seemed to have fixed my issue, but it did not get me exactly what I'm after.

The site is www.sungrowngourmet.com, here is a link to the project files. https://drive.google.com/drive/folders/ ... sp=sharing

There are a number of things going wrong. I'd like the pic behind "Coming in 2022" to fit better in the viewport to show more of the image. Is there a way to use the - max size and retain a flexible image? Also if I shrink a desktop browser window beyond a point the "Welcome to Sungrowngourmet.com" text goes BEHIND the layout grid background. The image that is the background for the "coming soon" section should stay put while the content scrolls past. I had this working before, but adding the - seems to have broken that. (**Edit** after resizing the image to 970 this seems to work again) The same image on the "about" page doesn't always stay put, but I can't see what is different about the settings for the grid or image, or why it's behavior seems inconsistent. The menu is supposed to become a sandwich menu in smaller breakpoints, but it never does on my phone, or when I shrink a browser window.
Mainly I need the menu to act right, and I'd like the background image behind "Coming soon" to scale properly and stay put (on both pages, it is on the "about" page also but without text or a card).
If you have any suggestions please describe where the variable or checkbox is that you're referring to, thanks!
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Using -970 to set max of layout grid width not working as hoped.

Post by crispy68 »

Unless I don't see it, there are only images via your link. Where is the .wbs project file?
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Using -970 to set max of layout grid width not working as hoped.

Post by Pablo »

The behavior of the cover functionality is described here:
https://developer.mozilla.org/en-US/doc ... round-size

If the image does not have the same aspect ratio as the container (layout grid) then it will be clipped.
So, the size and the aspect ratio of the image is important to get the right result.

If you need further help then please prepare a DEMO PROJECT.
The projetc should only have pone page and the elements which are relevant to your question.
See this related FAQ:
viewtopic.php?f=10&t=82134
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Using -970 to set max of layout grid width not working as hoped.

Post by Fredl »

Here are the project files, sorry about the first link, I thought the .wbs file was in there.

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

When I resize the browser window on a desktop it seems like the breakpoints I set aren't working. Sometimes the top text goes behind the background image, also the menu behavior isn't what I expected. I began this project with the Coffee 2.0 template, I notice that it uses Flexbox grid system, maybe this is where I'm running in to issues, as I have more experience using default grids.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Using -970 to set max of layout grid width not working as hoped.

Post by Pablo »

Firstly, you will need to set the page alignment 'do not center this page' because it conflicts with layout grid. This option should only be used for fixed/absolute layouts.
See also: http://www.wysiwygwebbuilder.com/layoutgrid_part1.html

Also, what is the purpose of the breakpoints? What did you expect to happen? The layout is already flexible/responsive.

The reason why the background image is clipped like this is because you have selected 'parallax'.
In that case, the image's size will be calculated based on the browser window size, because otherwise the would not be any for margin the parallax effect (it needs to be able to scroll up and down).
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Using -970 to set max of layout grid width not working as hoped.

Post by Fredl »

Thanks Pablo,
I'll ditch the breakpoints. I've experimented with the image size and aspect ratio, but now I'll set the image properties to something else.
What should I set the image property to for it to stay in place, not grow beyond the grid too much and have the content scroll over it? Contain looks good, but the card now scrolls with the page. Any idea why when I shrink a browser window the menu doesn't always fit in the viewport, or switch to the sandwich menu? Maybe when I remove the page centering that will be fixed.
Thanks for your help, I've been using your software for years but am still learning, I hope my help requests aren't too tiresome.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Using -970 to set max of layout grid width not working as hoped.

Post by crispy68 »

Any idea why when I shrink a browser window the menu doesn't always fit in the viewport,
I've looked at your demo and I don't see an issue with it staying in the viewport. Do you have a screenshot of what you are seeing on your end?
What should I set the image property to for it to stay in place, not grow beyond the grid too much and have the content scroll over it?
The issue is when it is set to parallax the image is set to cover which will cover the entire width of the page and height of the container which will crop your image. Your page is very very skinny (970px). Personally, i would tell you to create your default page much wider as on my screen there is too much blank space on either side of your site. With a 24" monitor, I want your site to fill my screen and not be a sliver down the middle. This would help make your bg image look better.

However, if you choose to keep what you have, open up a html code object, set it to "between <head></head> tags" and try adding this code to your page:

Code: Select all

<style>
#wb_intro{background-size:contain;}
</style>
You may have to play with the height of your "intro" layout grid in breakpoints to make sure the image looks good.
Fredl
 
 
Posts: 112
Joined: Tue Feb 21, 2017 10:15 pm

Re: Using -970 to set max of layout grid width not working as hoped.

Post by Fredl »

Thanks Pablo, I'll try a wider page for starters. I got rid of the breakpoints already as you pointed out that it was already responsive, is there still a way to play with the intro grid height?
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Using -970 to set max of layout grid width not working as hoped.

Post by Pablo »

The heihht of a layout grid is determined by the contents. So, if you want to increase the height then you will need to increase the height of the content.
For example, by adding margin to the elements.
Post Reply