Solved

Why is my Dawn theme button not clickable after adding backdrop-filter blur?

anhad
Tourist
8 0 0

Hello.
I made a custom homepage banner in my Dawn theme and everything works fine accept when I'm putting backdrop-filter blur to the content container. When i give the container background blur, it makes the button unclickable. Help!Screenshot (797).png

 

Accepted Solutions (2)
Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @anhad please add the below css to "section-image-banner.css" file.

 

 

.banner:after{
  content: none !important;
}

 

Thanks.

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Vinsinfo
Shopify Partner
175 60 53

This is an accepted solution.

@anhad Please add below code in base.css file and let us know whether it is helpful for you.

 
To locate base.css file,
1. From admin panel, go to "Online Store" -> "Themes".
2. Click action button and select "Edit code".
3. Search "base.css" file and paste the below code at the bottom of the file.
 

 

.banner:after {
    display: none;
}

 

View solution in original post

Replies 5 (5)

Zeel-prajapatii
Shopify Partner
138 32 27

@anhad please share the site url here.

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
anhad
Tourist
8 0 0
anhad
Tourist
8 0 0
Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @anhad please add the below css to "section-image-banner.css" file.

 

 

.banner:after{
  content: none !important;
}

 

Thanks.

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

Vinsinfo
Shopify Partner
175 60 53

This is an accepted solution.

@anhad Please add below code in base.css file and let us know whether it is helpful for you.

 
To locate base.css file,
1. From admin panel, go to "Online Store" -> "Themes".
2. Click action button and select "Edit code".
3. Search "base.css" file and paste the below code at the bottom of the file.
 

 

.banner:after {
    display: none;
}