Having trouble getting only one background to show for mobile
SOLVE
I am not a designer but I am in charge of a lot of the design/template stuff for my awesome small company, so while I am really good at googling for most solutions, I am stuck right now. I'm fairly certain this is a competing class/css issue, but no clue how to solve. I am trying to make it so that the banner/hero image shows up fully on desktop and tablets, but then changes to a different version of the image for mobile. We have that set up successfully for a different template (but the class declarations are different {hero vs. banner}.
Here is the preview page and you can see the banner image shows up correctly, but when you start to make the browser window smaller, there is a second (mobile-only) version of the image that shows up underneath and doesn't go away until I make my browser large again.
You did nice work and creating a pretty template for your company
I think there is something missed out in your HubSpot COS Template.
After some lookup in your template, I found duplicate class name issue you had given, is not unique and conflict with another class name. For both images parent group class name and desktop banner images class name are same.
In your case, if you give display: none to the desktop image in media queries then it will hide both images because of the same class.
The simple solution is given desktop image module some unique class like
and your desktop image will hide at the same time your mobile image shows and vice versa.
This would be much better accomplished using a background image though because you can swap the image in your css instead of having two modules (both existing even if either one is hidden) and would also allow you to place text or other content over the image. I would consider this.
You did nice work and creating a pretty template for your company
I think there is something missed out in your HubSpot COS Template.
After some lookup in your template, I found duplicate class name issue you had given, is not unique and conflict with another class name. For both images parent group class name and desktop banner images class name are same.
In your case, if you give display: none to the desktop image in media queries then it will hide both images because of the same class.
The simple solution is given desktop image module some unique class like
Having trouble getting only one background to show for mobile
SOLVE
I didn't deselect the email notifications, because I wanted to make sure I saw a response 🙂 I received the one for your reply, so, eh, oh well. It's happened to me with HubSpot support emails in the past too.
I think both your and Jsun's solutions will work but it'll take a while for me to test, so I'll go ahead and accept yours with that caveat.