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

[christinacschne]

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

[Anton]

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

[christinacschne]

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

[Anton · Accepted solution]

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)

[sharonlicari]

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