[Support request] Styling image block

Home Forums Support Styling image block

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1430974
    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

    #1431011
    Leo
    Staff
    Customer Support

    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 🙂

    #1431203
    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…

    #1431205
    Leo
    Staff
    Customer Support

    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 }.

    #1431242
    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…

    #1431278
    Elvin
    Customer Support

    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.

    #1431723
    Milos

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

    #1434500
    Elvin
    Customer Support

    Nice one.

    No problem. Always glad to be of any help.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.