Relume

Log inLog into community

Community forum for knowledge and support

Updated 10 months ago

Styling Cms Item Tags For Optimal Display

Styling Cms Item Tags For Optimal Display

At a glance

The community members are trying to figure out why the tags on CMS items are not behaving as expected. The main issues are that on mobile, the tag text is wrapping onto two lines, and the tags themselves are not wrapping to a new line. The community members have tried various approaches, including checking for custom code, investigating the use of CMS Nest by Finsweet, and testing different settings in the designer. However, they have not found a clear solution yet. Some community members suggest that the nested grid and flexbox divs above the tags might be causing the issues, and recommend trying to build out the card layout separately from the filtering layout to isolate the problem.

Useful resources

·

Can anyone help me to figure out what I'm doing wrong in styling these tags on CMS items? Read-only
On mobile the tag text is wrapping onto two lines, but I want it to stay on one, and for the tags themselves to wrap to a new line. I’ve also added a screenshot of where in the navigator to find the elements

M

E

37 comments

gosh there is something very strange going on here...been on this for a bit now with a lot of strange behavior and I thought for sure this would be a 1 minute fix....is there any custom code that would be affecting this portion at all or?

It's using CMS Nest by Finsweet, I'm guessing that's causing the complexity?

Well I don't know about that because the issues that I was seeing were in designer. Like "South Africa" tag has no padding on either side of it but the others do but kenya has a large padding on the right side. Whats up with that?

like this really makes no sense at all

Im confused too, and I just went on designer to investigate and now the cards are really wide

well im on desktop breakpoint because thats where I think the issues are first

But my tags aren't showing up like yours

yeah for some reason on mobile portrait and down, they are fine

Mine are fine on desktop too

I'm gonna republish and see if yours work

yeah, send along the published URL when you do that

https://www.vumba.travel/destinations/namibia

because something isn't right here....identical classes, one is hooked up to the CMS, one is not.

still looks more narrow to me (less padding on the ends) than the other tags

Did you add in the static tag list to test?

yeah

for some reason, I never noticed this, but the default settings of a collection list item have 10px padding left and right and float left set

no idea why though

Should i just let the default settings ride then?

idk, but the other thing that is very strange is that I have never had gap sizing fill on the ends, its always been just the gaps

Yeah I was just about to point that out!

I think you have to start the whole project over Emily....

im just kidding

hahaha thats a cruel joke!!!

I wanted to let that hang awhile longer but I know how long and hard you have been working on this! 🤣

I know I know, my 5 year old would say "Bad joke dadddddd"

Hahaha those are the risky ones

Do you think Finsweet CMS nest could be causing it?

I might try their support

naw, because all of the issues are within designer

what I would probably do first is build out the card layout separate of the filtering layout entirely

like I would literally take the filtered-holidays_collection-item and down into a static page, unbind CMS (use the finsweet tool for this) and get the card to behave correctly first

I have a feeling its got somethign to do with all of the nested grid and flexbox divs above it that are causing chaos

Ah okay that makes sense. I'll give it a go

Thanks a million !!

for sure, let me know if you solve it so I dont go nuts over here

Add a reply

Sign up and join the conversation on Slack