Streaming live at 10am (PST)

CMS column widths inconsistent


#1

Hello! I’ve set up tabs to filter CMS content, and when one particular tab is selected, the column widths of the CMS cards are narrower than when the other tabs are selected.

When I’m working in the Designer, the width issue doesn’t seem to be happening, but it is definitely happening on the live site.

Any ideas on why this is happening, and how to resolve it? Thanks in advance!

The tab with the issue is “Facilitation and Training”.

Link to live site: http://erikaharano.com/projects
Link to read-only site: https://preview.webflow.com/preview/erikaharano?utm_source=erikaharano&preview=4b381183b494062157c9033ca6ca3f3d


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


#2

Hi @erikaharano,

From what I can see,

  • You are using flexbox on tablet, why not on desktop instead of float?
  • Set your collection to have a full width column layout as you are already doing the “grid” job with flexbox
  • no need to define the width of the flex parent as it will already take 100% of the space by default
  • yes for the flex children, setting their width in % of the parent with the wrap property is the way to go :slight_smile:

On my end it is working really well with this method. But as you mentioned the published site let me know how it goes on your end.


#3

Thanks so much @Maximosaurus! Good call on using Flexbox in desktop, too.

I tried your recommendations (or at least I think I did!) but am still running into the issue with that one tab only. Any ideas on why this might be happening?

I appreciate your support :slight_smile:


#4

There are a few things I can see.

It’s gonna be quicker for me to share with you some screenshots of the styled I applied to your “grid” to make it work.
Just you can remove the class on the image as it’s what is causing the weird behaviour. If you define a specific height on an image as well as width in % you end up with a squished image as it is not respecting the aspect ratio.

So here are the screenshots of the styles you need to achieve this kind of layout with flexbox.
Let me know if something is unclear.

Cheers


#5

Thanks so much for your thorough and thoughtful support, @Maximosaurus. I made the changes you offered through the screenshots, and I’m still running into the issue with that one tab. I’ll keep playing around…

Actually, I just tried adding one of my other CMS items to match the filter I created for the “Facilitation + Training” tab, so that there would be three items for that filter, and that seemed to do the trick. Maybe the issue was something about only having two CMS items match the filter…


#6

It shouldn’t come to be different for 2 or 3 items.

Maybe I don’t get what you are trying to achieve.
You didn’t apply all the style the way I recommend but particularly you should remove the class on the image call “card image”.

Because the image will be 100 width of the item and the height is set to be a fix 320px you are not gonna keep the aspect ratio.

With your class

After removing it

Am I getting something wrong?