Align filter buttons

Store Design
,
1

Hello

How can i align these 2 buttons please?

www.thebodyshop.com.lb

Dosawr

TBS2023_0-1718366230808.png
TBS2023_0-1718366230808.png367×122 2.51 KB

2

@TBS2023 - please add this css to the very end of your theme.css file and check

.collection-filter {align-items: flex-start;}
button.js-drawer-open-collection-filters.btn {margin-top: 0;}
3

Hello @TBS2023

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save

@media screen and (max-width: 749px) {
	.collection-filter__item.collection-filter__item--drawer button.js-drawer-open-collection-filters.btn.btn--tertiary {
		margin-top: 0;
	}
}

dws_pvt_ltd_0-1718366863717.png
dws_pvt_ltd_0-1718366863717.png333×605 101 KB

Best Regards,
Dws_pvt_ltd

4

Hello @TBS2023

Sorry for the issue you are facing, i’ve checked and find the solution for it.

Here, you just need to follow below steps:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.collection-filter button.js-drawer-open-collection-filters {
 margin-top: 0;
}

Hope this solution works fine for your issue.

If the solution works, then accept and like the solution.

Thanks and best regards !!

5

Hello @TBS2023
Go to online store ---------> themes --------------> actions ------> edit code-------> Theme.CSS-------> line number 13782
and delete

.btn {
     margin-top: 10px; 
}

the result will be

kl.png
kl.png423×774 95.1 KB

Let me know , if not solved.
Thanks

1 Like