Certain pages won't resize to mobile width - dynamic lists + flexbox?

Hey all!

My first webflow site is 99% finished (:tada:!) however, I can’t get certain pages to resize themselves on a mobile screen, and it’s driving me nuts.

Can someone help me out? :innocent:

I feel it has something to do with dynamic lists and flexbox, but I’m still learning and can’t seem to work it out myself.

Pages in question:

http://invincible-tricking.webflow.io/videos

http://invincible-tricking.webflow.io/video/loopkicks-swiss-steeze

Very much hoping you can help me out - I’m so keen to set the site live and am frustrated at how close I am :joy:


Here is my public share link: LINK
(how to access public share link)

Hello! I am by no means a webflow expert, but I’ll try to help out!

I just checked out your video page and tweaked a few things.

  1. Your body element “more-videos” is stuck at 1260 width. Idk why that is, but I renamed this to reset the class. You can rename to anything that doesn’t already exist on that site.

  2. Your element “dynamic list wrapper” is set to 1260 width. Change this to auto and place 1260 on the Max width. This is the reason why the page is bigger than the screen size when sizing the browser. (I also changed this to auto before I had to rename the body element, and the body element was still stuck at 1260, so again, Idk why the body element is stuck at 1260 with that class name)

  3. Your element “dyn flex video” is set to 400 width. This is why the items are staying the same width instead of sizing with screen. Change this to 33.333% on desktop, 50% on tablet, and 100% on mobile(on mobile, also adjust the height to auto and maybe take the bottom margin down to 50px or so).

Everything seems to be working ok for me when I did this. I hope this helps sir!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.