Community forum for knowledge and support

Updated last year

Constraining the width of a header element

At a glance

How do I make Header 108 to not expand fully. I want to add a max width, for example 1440px, but it seems, it doesn't work.

Below is what is a screenshot from Figma. This is what I want to achieve. That it be constrained based on the max-width setting.

1
M
K
M
22 comments

Might have a suggestion here Mac!

How would you think about approaching this Maria? πŸ™‚

I now added a 1920px breakpoint. So, what I want to achieve is for the Header photos to stay at the size/layout (Screenshot above) when it reaches 1920px max-width for example

For some reason, the padding also is not applying properly on the right-images. It looks okay on the Designer but the published site is different.

can you send your published URL as well?

I tried removing the padding and added grid gaps instead, but still does not work. The Left images behaves normally, but for some reason the right images do not.

whats the target width you are trying to get it to? My feeling is that we might be trying to fit a square peg in a round hole but willing to investigate it a little bit at least.

ah read your previous messages

Sorry I was trying to solve 2 things.
Max-width for the Header images

and

Gaps not working properly for the left images

I solved the gap issue already by removing the -is-large-image class on the wrapper

yeah this should be completely doable, and its a really reasonable thing to expect, I'd say whatever we do end up coming up with for this, I will be sure to pass on to and to put into the component by default.

Out of fear of what changes you may have made, I think I'm going to start with a fresh component in my own project and go from there.

one theory that I have is that it looks like a lot of the units used in this component are % based, so my fear is that this won't be a 10 minute investigation. Are you okay with waiting a little bit while I investigate it or do you want some quick tips to point you in the right direction sooner rather than later?

This is the one that caused that issue.

I'm okay with waiting no problem. I was just wondering with my original question if it was possible to constrained the header images to a max-width so it won't expand infinitely.

right yeah, thats the part that will take some time I think, but I'll know more here shortly.

yeah the entire concept of this component is based on viewport width. So the biggest challenge here is restructuring it entirely to be a fixed width.

I'll continue to mess around with it, and report back - if you resolve it let me know as well.

Hey ,
The issue with this component is tied to the animation, requiring the large image to maintain a relative width based on the viewport. Here’s a potential solution (though it might not be perfect for smaller screens):

  • Wrap header108_image-list within a container-medium or assign a max-width directly to the image-list.
  • Remove width specifications from the small images: is-image-small and header108_small-image-group.
  • Adjust the size of the middle column in the grid of header108_image-list using the same vw as the large image.

If you intend to reduce the viewport width (e.g., from 36vw to 32vw) for the large image, ensure updating both the grid column within the parent header108_image-list and the size of the large image within the animation. Here you got a loom video and the preview link.

Let me know if this helps πŸ™‚

Thanks a ton for your insane generosity! Appreciate the loom video πŸ™Œ

Huge thanks also to and for your help πŸ˜€πŸ™

Add a reply
Sign up and join the conversation on Slack