How can I fix the width and center text of my CSS filter buttons?

[Fadel1]

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!

 

[Sheesh_b]

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:

Thanks

Sheesh B

[Fadel1 · 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

[Sheesh_b]

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