Help Needed: Fixing Tag Styling Issues in CMS Items on Mobile

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

37 comments

Matt J.
·
Emily M. 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?
Emily M.
·
It's using CMS Nest by Finsweet, I'm guessing that's causing the complexity?
Matt J.
·
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?
Matt J.
·
like this really makes no sense at all
Emily M.
·
Im confused too, and I just went on designer to investigate and now the cards are really wide
Matt J.
·
well im on desktop breakpoint because thats where I think the issues are first
Emily M.
·
But my tags aren't showing up like yours
Matt J.
·
yeah for some reason on mobile portrait and down, they are fine
Emily M.
·
Mine are fine on desktop too
Emily M.
·
I'm gonna republish and see if yours work
Matt J.
·
yeah, send along the published URL when you do that
Emily M.
·
https://www.vumba.travel/destinations/namibia
Matt J.
·
because something isn't right here....identical classes, one is hooked up to the CMS, one is not.
Matt J.
·
still looks more narrow to me (less padding on the ends) than the other tags
Emily M.
·
Did you add in the static tag list to test?
Matt J.
·
yeah
Matt J.
·
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
Matt J.
·
no idea why though
Emily M.
·
Should i just let the default settings ride then?
Matt J.
·
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
Emily M.
·
Yeah I was just about to point that out!
Matt J.
·
Matt J.
·
I think you have to start the whole project over Emily....
Matt J.
·
im just kidding
Emily M.
·
hahaha thats a cruel joke!!!
Matt J.
·
I wanted to let that hang awhile longer but I know how long and hard you have been working on this! 🤣
Matt J.
·
I know I know, my 5 year old would say "Bad joke dadddddd"
Emily M.
·
Hahaha those are the risky ones
Emily M.
·
Do you think Finsweet CMS nest could be causing it?
Emily M.
·
I might try their support
Matt J.
·
naw, because all of the issues are within designer
Matt J.
·
what I would probably do first is build out the card layout separate of the filtering layout entirely
Matt J.
·
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
Matt J.
·
I have a feeling its got somethign to do with all of the nested grid and flexbox divs above it that are causing chaos
Emily M.
·
Ah okay that makes sense. I'll give it a go
Emily M.
·
Thanks a million !!
Matt J.
·
for sure, let me know if you solve it so I dont go nuts over here

Help Needed: Fixing Tag Styling Issues in CMS Items on Mobile | Relume Community