Problem with „Max width of content“

[benni]

Hey guys,

i have an issue I could use some help with…

I basically want the content of a site to stop resizing after it surpasses a certain width in px.
You already added the „Max width of content“ to lay options, which is nice, but I also want the row gutters, offsets and everything else that is set in % to stop resizing.

Is there an easy way to do this?
Or do I have to use a media query and change every % to px (and figure out the right px)?

Any help and direction would be appreciated :)

Cheers
Benjamin

[Richard]

Dear Benjamin

@benni

Just curiously why does max width of content not work for you? the Gridder widths should stop enlarging at some point?

If not:
I think you will need to target the Row's, columns, margins specifically, Unfortunately -- i may be wrong - -but i don't think there will be a default Class that you can simply apply all px to at a certain point.

I haven't done this myself but keep the viewport a certain size after a certain point may be a much easier trick for you to work with on large screens:

Something like:

https://stackoverflow.com/questions/29595612/how-to-prevent-site-from-being-responsive

Or googling similar actions

---

Best wishes 🌝

Richard

[benni]

Hi Robert,

thank your for your reply!.

I found a solution to my problem.

First of let me explain again what my problem was…

I set the max width of content to 1680 px and created a layout with offsets on lots of images.

The gridder width stopped enlarging as expected :)
But this didn't stop the images with offsets from adjusting their position according to the browser width.
So on a really big screen the offset images would be offset way too much in relation to the rest of the content.

My solution for this was to use the transform() CSS function instead of using the offset in the gridder menu.

This way the offset stops enlarging after the browser reaches the specified max width.

For everyone who runs into the same issue, here is what you have to do…

Give the element you want to offset an ID and then use the custom CSS option to define the offset via the translate() CSS function.

Here is an example of what your CSS could look like:

#img-1 {
transform: translateY(-30%);
}

This bases the offset on the width of the image you gave the ID to.

I hope I explained it in a way that is understandable :)

[benni]

Sorry Richard, I just saw that I called you Robert 😉

[Richard]

Dear @benni

No worries calling me Robert! ⭐️

Thank you for the great solution that will help others 👍

Give the element you want to offset an ID and then use the custom CSS option to define the offset via the translate() CSS function.

Here is an example of what your CSS could look like:

#img-1 {
transform: translateY(-30%);
}

This bases the offset on the width of the image you gave the ID to.

---

have a wonderful day

Richard