How to automatically decrees the size of a div

Hello,

If you scroll down on my site you have these boxes that are 900px by 900px pixels which is great but when the vertical size of the browser is smaller then 900px i’d like those boxes to get smaller either with percentage or some other way. I would want the whole box to fit onto the screen.

Please let me know how this is possible. Thank you in advance!

This is my live site:
https://preview.webflow.com/preview/folio20?utm_medium=preview_link&utm_source=designer&utm_content=folio20&preview=edf07d7efed6069a5e020960d3764577&mode=preview

Hey there, @herardo! On those boxes, add a max width of 100vw.

Hope this helps!

1 Like

Hello @herardo you can always use percentages instead of pixels for that as well. Another way to do that is in each slide don’t put things in the default slide, instead everything goes in a div that’s a flexbox. Then you can center everything and use a percentage to get it fully responsive.

1 Like

Hi @herardo If you want to auto adjust something, just set the CSS attribute to ‘auto’,
like overflow:auto; or position:auto;
and other stuff like that.

1 Like

Thank you guys! This seemed to work great:
adding a max width of 100vw.

I have a new problem now. On mobile specifically my background video stopped playing in a loop? And also now has a big play button in the middle? This was working just earlier and then just stopped out of nowhere? Any advice would be helpful please? Thank you in advance.

1 Like

Glad that worked for you @herardo. When you get a chance, please mark the solution above so the community knows your question has been answered and others can find it as a solution.

As for your other questions, I cannot reproduce this. When I click your read-only link, it shows the background video looping and without a play button. I don’t have the live link - is that what you’re referring to?

Thanks!

1 Like

Cool, I just marked the solution as per your request.

As far as the video looping problem, looks like it was a bug with in Webflow and now fixed itself.

1 Like

This is so so so strange. The background videos on my site will sometimes work and sometimes not. And it adds a big circled play button.

I’ve tried uploading the entire site from webflow to my own server and the problem still continues.

I’ve also tried everything they speak about in this article and it didn’t help:

You can see on the screen it adds this play button:

This is my live site:

This is my live webflow site:
https://preview.webflow.com/preview/folio20?utm_medium=preview_link&utm_source=designer&utm_content=folio20&preview=edf07d7efed6069a5e020960d3764577&mode=preview

Also I’m 100 percent sure but I feel like this problem might be happening maybe at certain times, I think more in the night time.

Any help with this would be very much appreciated. Thank you in advance!