How can I set a flex child to shrink at higher breakpoints

I am using the following template for my portfolio site:

On the home page I want to setup my portfolio case studies to display horizontally. Each case study is a flex child in a flexbox. I can do it at the desktop breakpoint:

But when I set it to a larger breakpoint (ex. 1280px) the content overflows from the container.

I could set it to wrap the flex children but I want the layout to be consistent from the desktop breakpoint onwards. What would be the best way to achieve this?

I thought I could set up the flex children so that they would shrink by 2 but that did not keep the content from overflowing from the container so I set it back to the default of Shrink: 1 and Basis: Auto.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Maggie, this is a long vid ~20 mins because there was a lot of styling to undo across the breakpoints. I’ve covered a series of techniques and general layout approaches to help you achieve your desired layout goal.

Some of the tips & techniques covered;

  • Use grids rather than columns
  • Use grids within grids to do sub layouts
  • How to adjust grid layouts across breakpoints
  • Fixing rogue manual positioning and colspans in grids
  • Using DIV-DIV rather than the Section-Container construction, for better layout at higher breakpoints
  • Going as minimalist as possible on element sizing, and allowing the layout to govern that delivers a much cleaner and more responsive layout
  • Avoiding unnecessary use of vh
1 Like

I went through the video and made the changes that you demonstrated. Around the 16 minute mark I noticed that you added two divs before the main-portfolio div and applied a Container class to the first div and a Section class to the second div.

Those two class selectors were from a component that came with the portfolio template. The component (Contact) is one that I removed in an earlier iteration of my site. That’s why the margins and padding were strange on those. I did want to organize the layout the way you did so I took the same approach but created new class selectors temporarily to test it out (test-section and test-container).

Overall thank you for the help. I’m going to look at the other pages on my site and make sure that I am not making the same mistakes there that were on this home page.

I do have four more questions:
a) What is the best way to clean up elements you no longer want to use from a component? I don’t want to delete anything and end up causing more chaos that I already have (Note: don’t remove the style guide…)

b) Why did you create a div for the section and container instead of using the existing Section and Container elements that Webflow provides?

c) Why do you feel that columns are an outdated way of organizing content on a site? I still see sites that are recent using columns in their designs. They aren’t old ones or ones that haven’t been updated in years either.

d) What are some good resources to learn more about creating responsive layouts? I have gone through some of the tutorials in Webflow University and looked at the Mozilla Developer Network Web Dcos when I wanted to learn something on the fly (ex. how to use tags like ) but I’m looking for something more comprehensive.

Hi Maggie, interesting questions.
Here’s some reflection on them;

1 Like