Streaming live at 10am (PST)

Container Size - stop container shrinking


#1

Hi

I am setting up sections with containers
The sections are vertically centred flex
the containers do not have any settings applied
The containers are shrinking to the content they contain. I do not want this I would like the containers to be at their 100% width so that all the containers on the page have to align edges regardless of how much content in them. Containers which have a lot of content are positioning the way I would like it is only the containers with a small amount of content which are moving.

Can I set containers to sit at 100% so they are always at a consistent 100% for each device and never smaller?
Thanks!


Here is my site Read-Only: **

https://preview.webflow.com/preview/black-butter-creative?preview=a5a806901e8b050f3b0695c100cd3310

**
(how to share your site Read-Only link)


#2

container have max-width property
image

How to override this. Add div —> give for this div a class "full-width-container" set width to “none” (or “1400px” or 90% any unit you want) - remove the div. Add this class for the container

For more specific answer add screenshot + in what page you find your problem

Flexbox parent & child with max-width - will collapse. Why?

flex-grow zero(by deafult): It sizes the item based on its width / height properties (or its content if not set). css-tricks

In our case the container have no width - so "its size based on is content)
Try this (or set width to 100% or other unit)


#3

Great thanks so much for the help! I’ll give this a go and come back if I have any issues. Thanks for your time :slight_smile: