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.
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.
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.
Sorry I was trying to solve 2 things.
Max-width for the Header images
and
Gaps not working properly for the left images
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?
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):
header108_image-list within a container-medium or assign a max-width directly to the image-list.is-image-small and header108_small-image-group.header108_image-list using the same vw as the large image.header108_image-list and the size of the large image within the animation. Here you got a loom video and the preview link.