Archived topic
Styling image block
7 replies · Started by Milos on September 4, 2020
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
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 :)
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...
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 }.
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...
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.
Thank you for help and descriptive explanation. I got it. Only small supplement with great effect. It works!
Nice one.
No problem. Always glad to be of any help.
