CMS Development

BCharles
Participant

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!

Cheers,

Brianna

0 Upvotes
1 Accepted solution
BarryGrennan
Solution
Top Contributor

Section background change for mobile responsiveness

SOLVE

Then I'd revert to the css method and use Inspect Element in Chrome to find
out the class of the section and I'd of it's parent/ancestor

 


Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

View solution in original post

0 Upvotes
5 Replies 5
BarryGrennan
Top Contributor

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:

.dnd.area-row-0-background-image { background-image: url(NEW_IMAGE_URL) !important; }

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:

#main-content .dnd.area-row-0-background-image { background-image: url(NEW_IMAGE_URL) !important; }

Again, id and class will depend on your theme.

That's sort of a quick and dirty way of going at it. The duplicate modules or new custom module methods are likely cleaner.


Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

BCharles
Participant

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. 

 

Screenshot 2022-07-25 at 09.10.24.png

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. 

 

Kind regards, 

Bree

0 Upvotes
BarryGrennan
Top Contributor

Section background change for mobile responsiveness

SOLVE

That's curious. Every theme I've ever built/worked with has had it and it's not that new a feature.

Although per the documentation "custom themes do not include mobile editing by default", so it's concievable that you could build a theme without it.

 

If it's the case that your theme doesn't have mobile breakpoints set up for whatever reason you'd need to set them up it your theme.json

0 Upvotes
BCharles
Participant

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.

Thank you for all your help. 

Bree

0 Upvotes
BarryGrennan
Solution
Top Contributor

Section background change for mobile responsiveness

SOLVE

Then I'd revert to the css method and use Inspect Element in Chrome to find
out the class of the section and I'd of it's parent/ancestor

 


Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

0 Upvotes