Jump to content

CSS Code to increase the backdrop-filter: blur(px); for iPhone users.

Recommended Posts

Here is the code I am using:

@media screen and (max-width: 640px) 
{
  #block-yui_3_17_2_1_1633441099136_6823
    {
      background-color: rgba(255,255,255,.2)!important;
      backdrop-filter: blur(15px);
    }
}
@media screen and (max-width: 1024px) 
{
  #block-yui_3_17_2_1_1633441099136_6823
    {
      background-color: rgba(255,255,255,.2)!important;
      backdrop-filter: blur(15px);
    }
}
@media screen and (min-width: 641px)

{
  #block-yui_3_17_2_1_1633441099136_6823
    {
      background-color: rgba(255,255,255,.2)!important;
      backdrop-filter: blur(15px);
    }
}

This works for the desktop view, and every phones browser EXCEPT an iphone. It will blur the background, but not as much as I specify in the code. Here is an example. Android is the first SC, iPhone is the second SC. I have tested with multiple generations of iPhones with varying screen sizes. Is there any other code I can try to accomplish this? Thanks!244538716_395761605550446_7594458122026476498_n.thumb.jpg.92dffe2c2a6e695fa30f523caae4f08a.jpg244650500_430509638499820_6671512224868594047_n.thumb.jpg.0c48bb91cdbb29e6ce274e1b15ce43db.jpg

Link to comment
  • Replies 0
  • Views 468
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.