[Support request] Styling image block

[Milos]

Hi there.

I am using Mike Olivers GP theme and I was inspired through the blog of Mike Oliver “Styling the WordPress image block” as well. So I added some style to my images in Gutenbergs Block with CSS on my Testimonials site to get nice opaque drop shadow there. But it works only on 2 of 4 images (my-class-2 img and my-class-4 img). Both images are for mobile view. By other two images for tablet and desktop (my-class-1 img and my class-3 img ) it does not work. How can I get the shadow there as well?
This is what I added to Simpel CSS with different class numbers (1-4):
`.my-class-2 img {
box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);
}

Thank you,
Milos

[Leo]

Hi there,

Not sure if I fully understand.

Are you wanting different shadows for each image?

If not then you should use the same class for all of the images

Let me know 🙂

[Milos]

No I do not want different shadows for each image.
All images have the same class (my-class-1 img) now but the result is the same.
Mobile images work, desktop and tablet images do not…

[Leo]

Your CSS is wrapped in mobile only media query so it’s only applying on mobile:
https://www.screencast.com/t/ejtnqfBVB

Make sure you closed all the previous media query with a }.

[Milos]

You know I am really unexperienced user…Could you explain step by step please?
This means I should delete this line with the media query?
Should I delete it directly in Google developer element style?
I could not find there index 85 but only index 59…

[Elvin]

Hi Milos.

I believe what Leo meant was, you have a custom CSS code that looks something like this:

@media (max-width: 768px) {
.inside-page-hero .smooth-scroll { display: none;} 
.my-class-1 img { box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);}

that has a missing an extra } on the end of it to close the @media CSS code, meaning it should be something like this:

@media (max-width: 768px) {
.inside-page-hero .smooth-scroll { display: none;} 
.my-class-1 img { box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);} 
}

Also, this CSS only applies on the mobile viewport because the @media query only allows the CSS code to be only applied on mobile viewports.

For .my-class-1 img { ... } to apply to all viewports, you must place it outside of @media (max-width: 768px) { ... }

That said, we basically turn this CSS code:

@media (max-width: 768px) {
.inside-page-hero .smooth-scroll { display: none;} 
.my-class-1 img { box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);} 
}

into this:

@media (max-width: 768px) {
.inside-page-hero .smooth-scroll { display: none;} 
}
.my-class-1 img { box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);} 

Hope this makes things clearer. Let us know if it works for you.

[Milos]

Thank you for help and descriptive explanation. I got it. Only small supplement with great effect. It works!

[Elvin]

Nice one.

No problem. Always glad to be of any help.

[Author]

Posts