Section background change for mobile responsiveness
SOLVE
Hi all,
Apologies if this is a query submitted before. I've searched and searched but no existing code snippets are working for me.
I am trying to create a new 'Banner' section for our landing pages. However, I want there to be an option to swap out the section's background image for a different mobile-first image. In an ideal scenario, I'll also be able to add in a new image to the Section as well as changing the background image. This cannot be done in the drag-and-drop editor from the page's "Advanced" html option as I don't have a way to call out the one Section image I want to change. So I am thinking I need to create this as a module in the backend, but I'm wondering if someone has done this before and can share a link to make it easier?
I am a beginner when it comes to writing code, but I can edit our modules fine in HubSpot. Thank you in advance!
Section background change for mobile responsiveness
SOLVE
Hi Brianna,
It might need to be a custom module.
Is the Banner a premade section in your theme or is it a module itself?
If it's a module you could make use of the "hide this module" feature and have two versions of the banner, one that you hide on desktop and one that you hide on mobile.
If it's a section with a background image you probably can force it to be different with css, something like:
The css class would obviously need to be different depending on your page. You'd probably also need to use an ancestory with an id to really force the "important" to override also, so something like:
Section background change for mobile responsiveness
SOLVE
Hey Barry, thanks for responding.
Unfortunately, it looks like I don't have the 'edit for mobile' option. Is this a new beta feature? As this would be a perfectly fine solution.
It's not a premade Banner section, this is a collection of modules to make up the section. Making use of the ancestory, id and class is going beyond my current skill level.
Section background change for mobile responsiveness
SOLVE
Thanks Barry, that was very helpful and I was able to add this to my custom theme's editor!
Unfortunately, my original issue stands as the 'Hide for mobile' option still only applies to modules that have backgrounds built into them. Until I can find a solution to coding a new module from scratch I believe I'm at a stalemate with the code and design options in swapping out mobile optimised background images with our HubSpot template.