Brooklyn: Disable Auto Formatting of Collection Page Tags on Mobile Version

Solved
JErgo
Excursionist
22 1 6

Hi there!  On the mobile version of a Collections Page on the Brooklyn Theme, I am trying to stop collection tags from auto formatting/auto resizing into a long list (see first picture).

I think I've identified that there is an in-line or auto width set for .tag--collection, but cannot identify where I would make this change for mobile only. I assume that it is auto formatting based on the media screen and max width.

Any suggestions on how I can disable this for the mobile version? See second picture below for desired mobile view. Thank you!

 

Current Mobile View of Collection Tags

Current Mobile ViewCurrent Mobile View

 

Desired Mobile View of Collection Tags

Desired Mobile ViewDesired Mobile View

 

 

 

 

 

 

0 Likes
Kriz
Shopify Staff
Shopify Staff
38 1 11

This is an accepted solution.

Hi JErgo,

You'll need to target the list items for the tags. This CSS should do the trick:

 

.tags--collection li {
  display: inline-block;
}

 

The tags already have this styling on desktop, so there's no need to use a media query (i.e. make it specific to mobile). This will ensure they look the same on different screen sizes.

JErgo
Excursionist
22 1 6

Thanks for the quick help, @Kriz! Placed it at the bottom of theme.scss.liquid Asset and it worked like a charm. Had a feeling it was that simple. Thank you!

 

Screen Shot 2021-03-08 at 9.46.36 PM.png

0 Likes