CMS List/Grid Styling On Published Hosted Site

Issue:
In the Designer and Preview modes, my website CMS grid/list layout is correct and shows as follows:
Desktop - 3-across
(but on published hosted site, shows 2-across)
Tablet - 2-across
(but on published hosted site, shows 1-across)
Mobile - 1-across
(displays as expected everywhere)

I’ve tested Firefox, Safari and Chrome (latest updates + Mac Sierra latest update [NOT High Sierra]) in both regular and private/incognito modes.

Share Link:
https://preview.webflow.com/preview/stonecraft-media?preview=7e37b7db91aa791e8238fa84749632e7

Hosted/Published URL:

I’ve also followed some instructions by @Waldo (hey, I went and changed the class names of the elements to match the viewport they exist on via duplication/renaming)

The dynamic item elements have these Widths:
Desktop-Dynamic-Item-Animations: 33.33%
Tablet-Dynamic-Item-Animations: 50%
Mobile-Dynamic-Item-Animations: 1 00%

All dynamic list elements are all set to Settings Tab > Layout > Full Width.
Element names:
Mobile-Dynamic-List-Animations
Tablet-Dynamic-List-Animations
Desktop-Dynamic-List-Animations


UPDATE: I’ve restored a previous backup version of the site, and am working forward from here… I’ve even added the “?ac” to the designer, and messed around… no matter what I do, the issue still persists.


@anonmusic there were a few elements that had some odd positioning styles set on them, so I tried the following configuration and it looks to have done the trick for desktop:

@Waldo,

Why would I need to make SO many changes, if just about a month ago my site was working perfectly? I haven’t made any changes since then, and the first email you sent me.

This does not make any sense.

Also- I just noticed the Designer had an element visible on screen, but when I looked at the Display Setting, it was set to None. I had to flip from None to Inline Block, and back to None for it to disappear.

I’m really thinking there is an underlying issue with the Webflow side of things rather than my element settings.

@Waldo,

Also, I tried the changes in the screenshots above - and I’m not getting the same results…

See:

This is the first screenshot comparison…

Yours has a box… mine is still a line… (Element: ‘animation-content-row’)

This is the Second screenshot comparison:
Yours has ‘animation-category-cloumn’ pretty much centered… mine is aligned left…

This is the Third screenshot comparison… nothing on my end was changed - so yours and mine are the same.

This is the Fourth screenshot comparison… Yours shows a box outline of the ‘Column 19’ element… Mine shows just a line - we both have the same settings…

This is getting weird.

UPDATE:

After making the changes shown in the screenshots above - my Categories list, and my thumbnails list are not aligning on screen as I intend them to be…

I just think this changing of all these elements isn’t the right path to go down.


Original issue is this:

Left screen is the published site (undesired UI why are 2 columns showing instead of 3?!). Right screen is what Designer and Preview show (intended UI).

Hey @Waldo,

I fixed it!

  1. Restored a version backup from 8 days ago. (Had lots of stuff I liked in terms of styling and design.)

  2. Changed several of the element class names for better organization…

  3. Changed the ‘Desktop-Dynamic-Animation-List’ element to Flex, and ticked the ‘Wrap Children’ box.

  4. Changed the ‘Desktop-Dynamic-Animation-Item’ Display Setting > Width > to 33.33%. (Tablet element is 50%.)

  5. Changed the Collection List Setting > Layout > from 3-columns to Full Width.

  6. Made relevant similar changes to the other Collection List elements (I have one for desktop, tablet, and mobile).

Works like a charm now.

I wonder why I’m just now having to make these changes, and why I never had this issue in the past… shrugs

HI @anonmusic thank you so much for letting me know!

Just to follow up, you hadn’t made any changes to your site and the design changed without any updates from your end? Or had you been making design updates and then ran into these issues?

​Thanks in advance!

@Waldo,

Right - the only changes I made 8 days ago was to some text on a different page (updating some ad copy).

Everything was fine on the animation pages, since I had fixed them over a month ago, and tested the pages back then.

Just out of the blue decided it was not gonna display properly on my published site.

So that’s why I speculate some of the changes being made behind the scenes there at Webflow is causing the Designer and Preview mode to display something completely different than on a published page - unless little ‘tweaks’ are made like the ones I had to find.

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