Jump to content

Change intensity of Image Effect: Film Grain on Mobile Only

Recommended Posts

Site URL: https://www.viewchurch.co

I have a few changes I would like to make to this section of my site for mobile view only.

 

1. I have the film grain effect added on a section background on this site. On desktop, it's great, but on mobile, I would like to decrease the intensity and size of the grain. 

2. For the same section ("Summer Essentials") I would like the graphic to not be cut off. Compare to desktop version for reference.

3. The green scrolling bars on top and bottom of the Summer Essentials graphic I would like to be made shorter (while keeping scrolling text vertically centered).

IMG_6362.thumb.PNG.ceec7557ce21bb20f660348f19853f27.PNG

Any help is appreciated. Thank you!

Link to comment
  • Replies 3
  • Views 374
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="627324b83b74491634e84854"], [data-section-id="6273268a342195200b3748bb"] {
    min-height: unset !important;
    height: 5vh;
}
[data-section-id="62732420ec9ba80c5153127c"] .section-background-canvas.background-fx-canvas {
    display: none;
}
[data-section-id="62732420ec9ba80c5153127c"]  img {
    visibility: visible !important;
}
[data-section-id="62732420ec9ba80c5153127c"] {
    min-height: unset !important;
    height: 25vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="627324b83b74491634e84854"], [data-section-id="6273268a342195200b3748bb"] {
    min-height: unset !important;
    height: 5vh;
}
[data-section-id="62732420ec9ba80c5153127c"] .section-background-canvas.background-fx-canvas {
    display: none;
}
[data-section-id="62732420ec9ba80c5153127c"]  img {
    visibility: visible !important;
}
[data-section-id="62732420ec9ba80c5153127c"] {
    min-height: unset !important;
    height: 25vh;
}
}

 

Thank you. However I want to reduce the intensity of the grain filter, not completely remove it. Can you help with that?

Link to comment
21 hours ago, beccatapert said:

Thank you. However I want to reduce the intensity of the grain filter, not completely remove it. Can you help with that?

Hi,

I Have no idea to solve this without remove filter on mobile

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.