Streaming live at 10am (PST)

CMS Layout problems


#1

Hi!

I actually have a two-part question:

  1. I change the Collection list layout on desktop view to 4 (which weirdly only shows 3). Then on the tablet view, I set the layout to be 3 (which again only shows 2). Then I go back to my desktop view and it has changed according to my tablet view settings. Why does this happen? (the problem’s in the “Jälleenmyyjät” page)

  2. I have multiple products in a CMS list. But it only shows one product as first, not two. Doesn’t matter whether I have even amount of products or not (the problem’s in the “Kaikki tuotteet” page).


Here is my site Read-Only: https://preview.webflow.com/preview/adoamedica?utm_source=adoamedica&preview=f3a25f52027193a7592782b310da5166


#2

Hey @Rudeism,

as for the first part of the question, you should no use margins when you plan to use the columns widget. If you put any margin, it will break the layout. If you want some spacing, put your content inside a wrapper and give the Collection item a padding.


#3

The second part of the question I am not sure what you meant. Can you elaborate more about it? Maybe show me a picture made in Photoshop or something showing what’s supposed to happen and what’s actually happening.


#4

Thank you for taking your time. Here are a couple of pictures.

This happens:

This is what I’m aiming for:


#5

That’s very strange, I see no issues from my side. the layout is working properly on my Macbook Pro 13 inches on Chrome on both the integrated monitor and also on a 1080p external Dell monitor. No Issues at all.


#6

I now tried with Chrome too, works just fine. I use primary Safari and that’s where the problem arises, odd.


#7

I mean this problem:
(I go and change the tablet view and the desktop view also changes)


#8

I tested in Safari and got to fix it. First you are using both, the Column Widget and Flexbox, and thats probably causing some issues.

Fortunately the fix is easy:
Change your collection column widget to span all columns and give your collection items a basis of 50%

Here’s some screenshots:


#9

This one is the correct behavior of the column widget. If you want finer control, use put the column widget to Spam all columns and use Flexbox, them you will be able to control it with flex basis for each breakpoint.


#10

Ah, now everything works! Thank you very much for your help!


#11

Glad to read that everything works now. I’m closing the topic, have a great day.


#12