Custom Background Module - selecting different image for mobile & tablet view

Developer Support CMS Development
1

Hi All,

I’ve created a custom background module and it’s working great. The design team wants the image swapped out for a new image when viewing on mobile and tablets.

Are there fields I could add in the module that would allow for this swap out of images? Does anyone have thoughts or how they would handle this?

I appreciate your thoughts!

-Christina

2

Hey @christinacschne

Could you please share the URL?

I’ll tag a few experts that could share their thoughts with you.

Hey @ajchapman20 @Anton @stefen could you please share your expertise with @christinacschne ?

Thank you

Sharon

3

Hi @christinacschne,

there are many ways to achieve this.

You could:

  • Set up a wrapper div with
    class="changable-image" and then go with something like this( still in the HTML+ Hubl) section of the module

    .changable-image{
background-image: url({{module.large-image.src}});
}

@media screen and (max-width:667px){
.changable-image{
background-image: url({{module.small-image.src}});
}
}

    You will need to create two seperate image functions in the module(I’ve called them large-image and small-image)
    After that you paste just the source value of them into the right position.

But: It’s nessesary to do everything in the HTML+Hubl section since the other sections like CSS and JS can’t understand Hubl.

regards,

Anton

4

This is great, @Anton - I will try your suggestion and see if I can get it to work.
@sharonlicari thank you for getting back.
Here is my page. @Anton - do you have any suggestions on how to keep the Rich Text container below the background image from pushing up? Seems I have to place <br> tags so it pushes down and this isn’t ideal.
https://info.comporium.com/residential-subdivision-fiber-bg-image

5

You’re welcome @christinacschne,

sure

just

add some margin to one of those elements.

for the so called “hero”(your image module) add a margin-bottom or add a margin-top to the content(the rich-text below the “hero”).

I recomend to use “scaleable” margin values like em or vh

It should look like this:

.changable-image{
margin-bottom:5vw;- OR - margin-bottom:5em;
}

or

.content{
margin-top:5vh;- OR - margin-bottom:5em;}

Explanation:

em: uses your base font size. e.g: if your base font is 16px(every browser default font-size) the 5em would be 80px
vh: calculates the current browser height of the visitor and divides it by X. e.g: If your browser is fullscreen and you have a screen resolution of 1920*1080px(fullHD), then it would be (1080/100)*5 so 54px.

regards,

Anton

tipp:
If you’re using a theme from the marketplace it should have a class like “container” or “content” with a top and bottom margin(outer spacing of the element) or padding(inner spacing of the element)