# Section background change for mobile responsiveness **URL:** \ **Category:** CMS Development\ **Tags:** design-manager, css, html\ **Created:** [July 22, 2022, 1:44pm UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533 "2022-07-22T13:44:59Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![BCharles](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bcharles/32/35609_2.png) [@BCharles](https://community.hubspot.com/u/BCharles)\ **Post date:** [July 22, 2022, 1:44pm UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/1 "2022-07-22T13:44:59Z")
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 ---
**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\ **Post date:** [July 22, 2022, 6:24pm UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/2 "2022-07-22T18:24:57Z")
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. * * * [u][ **Barry Grennan** ]([https://www.seoanseo.ca?utm\_source=HubSpotCommunity](https://www.seoanseo.ca?utm_source=HubSpotCommunity))[/u] [Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity) [Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) ---
**Author:** ![BCharles](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bcharles/32/35609_2.png) [@BCharles](https://community.hubspot.com/u/BCharles)\ **Post date:** [July 25, 2022, 8:15am UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/3 "2022-07-25T08:15:19Z")
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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/6/26e99a2163dde7bda524ef37e215b0bb8e07eecd.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 ---
**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\ **Post date:** [July 25, 2022, 1:57pm UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/4 "2022-07-25T13:57:24Z")
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](https://knowledge.hubspot.com/website-pages/customize-drag-and-drop-content-on-mobile-devices) “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](https://developers.hubspot.com/docs/cms/building-blocks/themes/responsive-breakpoints?_ga=2.100991937.1500846705.1658756958-1300195273.1647309859&_gac=1.83429988.1657911539.CjwKCAjwoMSWBhAdEiwAVJ2ndoviSuMO7Sz1EVGuw6vq4yGuuAZx9BoejGus5-39JwvMkH8z5cyXwBoCeRwQAvD_BwE) ---
**Author:** ![BCharles](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bcharles/32/35609_2.png) [@BCharles](https://community.hubspot.com/u/BCharles)\ **Post date:** [July 26, 2022, 10:27am UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/5 "2022-07-26T10:27:00Z")
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 ---
**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\ **Post date:** [July 26, 2022, 1:03pm UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/6 "2022-07-26T13:03:28Z")
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 * * * [u][ **Barry Grennan** ]([https://www.seoanseo.ca?utm\_source=HubSpotCommunity](https://www.seoanseo.ca?utm_source=HubSpotCommunity))[/u] [Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity) [Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) ---
**Author:** ![kpooby](https://avatars.discourse-cdn.com/v4/letter/k/58f4c7/32.png) [@kpooby](https://community.hubspot.com/u/kpooby)\ **Post date:** [August 15, 2024, 6:28pm UTC](https://community.hubspot.com/t/section-background-change-for-mobile-responsiveness/61533/7 "2024-08-15T18:28:54Z")
Code-free/fast-and-dirty solution for posteriy! Duplicate the section and format for mobile. Hide the new section on desktop, and the original one on mobile. Works for individual modules, too. Just be mindful when making future udpates!