Solved

Need help with CSS filter buttons

Fadel1
Tourist
4 1 2

Greetings Shopify Community!

VIEW WEBSITE ON MOBILE OR INSPECT ELEMENT : https://redline2win.com/collections/phone-cases

Having an issue with my 2 filter "buttons" (See picture bellow)

I'm trying to make them the same width/text centered as the actual buttons above but i can't figure it out..


Been Googling a while and can't find a solution that works for me.. 

 

To anyone that could provide me with a solution, i'm greatly thankful!


Best regards!

Help.jpg

Accepted Solution (1)
Fadel1
Tourist
4 1 2

This is an accepted solution.

Hey, i tried your solution, this is the result i got on an iPhone 14 Pro (Pretty much the same on an iPhone 14 Pro Max

Screenshot 2023-10-07 at 20.42.35.png

View solution in original post

Replies 3 (3)

Sheesh_b
Shopify Partner
498 111 115

Hi @Fadel1 

Kindly paste the below CSS at bottom in component-toolbar.css and the file you can find under assets

body .toolbar .toolbar-item .toolbar-icon.icon-filter {
	display: inline-block;
	width: 190px;
	cursor: pointer;
	padding: 5px;
	background-color: #000;
	text-align: center;
}
.toolbar .toolbar-dropdown.filter-sortby .label-tab.hidden-on-desktop {
	width: 190px;
}

 

It'll look like below:

Sheesh_b_0-1696702981082.png

 

 

Thanks

Sheesh B

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
Fadel1
Tourist
4 1 2

This is an accepted solution.

Hey, i tried your solution, this is the result i got on an iPhone 14 Pro (Pretty much the same on an iPhone 14 Pro Max

Screenshot 2023-10-07 at 20.42.35.png

Sheesh_b
Shopify Partner
498 111 115

Hi @Fadel1 

This is pretty sure that the width that is added in the code I provided needs to be changed. You can check by reducing the width to 160px.

 

 

Thanks

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION