Blog, Website & Page Publishing

EStratton
Contributor

Responsive hero image

I'm trying to edit a template I did not create to make the mobile version look better. 

 

On this page:

https://discover.propertyradar.com/mortgage/lead-strategies-2022

 

Here's the current mobile version:
image0.png

 

And what I'd like it to look like:

image0-rev.png

 

The current featured image is a background image that's brought in with a macro:

 

{% macro render_background(image) -%}
{% if image.src -%}
{% set attrs = { style: "background-image: url(%s);"|format(image.src) } %}
{{ attrs|xmlattr }}
{%- endif %}
{%- endmacro %}

<div class="kl-hero-04" {{ render_background(module.image) }}>

The background image has to have a big transparent space on the left to not overlap the text, so it doesn't work in the mobile view. Can I code this to use a different image on the mobile version?

0 Upvotes
3 Replies 3
EStratton
Contributor

Responsive hero image

I've applied that code change and am seeing no changes in mobile view.

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Responsive hero image

Hi @EStratton ,

My Bad, I forgote to add curly brackets "{ }", please copy and pest, the code has been updated now:

@media screen only and (max-width: 920px){
.kl-hero-04 {
background-size: 80%;
background-position: -25% bottom;
margin: 1rem auto;
padding-bottom: 30%;
}
}


Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

webdew
Guide | Diamond Partner
Guide | Diamond Partner

Responsive hero image

Hi @EStratton ,

Please update below mentioned CSS code, it should work:
@media screen and (max-width: 920px)
.kl-hero-04 {
background-size: 80%;
background-position: -25% bottom;
margin: 1rem auto;
padding-bottom: 30%;
}


Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.