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

[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!

[crispy68]

Unless I don't see it, there are only images via your link. Where is the .wbs project file?

[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]

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.

[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]

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.

[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]

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?

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