element block with featured image as background - how to serve a specific one fo

Hi there,

options:

1. Is to use Custom CSS to specifically override the featured image background - but this sort of defeats the objective of using a dynamic header. To do this:

a. Select the Container Block - in Advanced > Additional CSS Class(es) add your custom class eg. mobile-featured-image
b. use this CSS to override the image:

@media(max-width: 768px) {
    .gb-container.mobile-featured-image:before {
        background-image: url(full_url_to_mobile_image);
    }
}

2. Alternative is to make sure all Featured Images have the same aspect ratio. Then you can set the Container height using % padding that matches the ratio.

Image Height / Image Width * 100 = Aspect Ratio %
Eg. 800px / 1200px * 100 = 66%.

You would set the Top padding of the container to 66%.
This will keep the image responsive.

Thank you David,

I'll go for option 2 and let you know.
Please have a look at the diagonal border at the bottom of the image.
It's a diagonal shape with a single white border.

As you can see, in the staging website (see urls in private info window) the border is white as it's supposed to be.
While in the live site the border is transparent (except for a thin white line).

The shape is the same. And the live website is a clone of the staging one and I don't recall I edited that element.
I have already tried replacing the shape in the live website with a new one but no luck.

How could I fix it? Thank you.

The issue is to do with the cls-1 class and the inline styles in your SVG <defs>.
There multiple SVGs that all have the cls-1 ( and cls-2 ) classes, and some have different inline styles that are overriding the earlier elements on the page.

See here:

https://www.screencast.com/t/1H3QYOxXIc3a

The first highlighted element is the Shape Divider, and it has a cls-1 style of fill: #fff;

Then further down the page, another SVG element is overiding that style with fill: none;.

I am not sure how you're generating the SVGS, but those cls- classes are a pain.

I see. It's a real mess :(

They are generated (not by me) with illustrator and indesign.

I am not an expert of svg code, would you suggest to get rid of those classes? (not sure if the file would work without them)
Or should each svg file have its own class name?

Thank you David, your support is always precious. :)

Removing them will break the styles.
Try this SVG HTML instead:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1550.47 108.25" data-name="Layer 1" id="Layer_1" preserveAspectRatio="none"><path d="M0,91.64,1550.47,0V719.89L0,811.53Z" fill="#fff" data-name="Tracciato 206" id="Tracciato_206"></path><path d="M0,108,1550.47,16.31V736.2L0,827.84Z" fill="#f6f4f4" data-name="Tracciato 206" id="Tracciato_206-2"></path></svg>

I stripped out the DEFS and added the fill style inline.

I also found this article which explains how to get Illustrator to inline the styles:

https://www.seancdavis.com/blog/inline-style-attributes-svg-elements/

Wow, thank you David,

in the meanwhile I tried find/replace the classes with unique names related to the name of the svg file.
But your code is cleaner.

Article read. It seams to be a frequent issue (if not aware of it while designing svg).
Really simple solution. :)

Have a nice day!

Glad to be of help!