CMS Development

MiaPV
Top Contributor

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.

 

Thanks in advance!

1 Accepted solution
TRooInbound
Solution
Key Advisor

Having trouble getting only one background to show for mobile

SOLVE

HI @MiaPV,

 

You did nice work and creating a pretty template for your company Smiley Happy

 

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.

class name trooinbound found.PNG

 

The simple solution is given desktop image module some unique class like

desktop-banner-image and write CSS code.

@media (max-width: 767px) {
  .desktop-banner-image {
      display:none !important;  
  }
}

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

more help please visit at www.trooinbound.com or email at hello@trooinbound.com

View solution in original post

5 Replies 5
Jsum
Key Advisor

Having trouble getting only one background to show for mobile

SOLVE

@MiaPV,

 

You have 2 image modules in your template. One you want to show on mobile and the other you want to show on desktop? 

 

Your mobile image is correctly hidden (your hiding the wrapper containing the image not the image itself which is fine)  using this code:

 

.mobile-banner-image {
    display: none !important;
}

and you show it using this media query:

 

 

@media (max-width: 767px) {
.mobile-banner-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
}

Both of these are in your landing-page.css stylesheet.

 

 

All you need is to add:

 

.bannerImage {
    display: none !Important;
}

to that same media query, so:

 

 

@media (max-width: 767px) {
    
    .mobile-banner-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
     }

    .bannerImage {
        display: none !Important;
   }

}

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. 

 

TRooInbound
Solution
Key Advisor

Having trouble getting only one background to show for mobile

SOLVE

HI @MiaPV,

 

You did nice work and creating a pretty template for your company Smiley Happy

 

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.

class name trooinbound found.PNG

 

The simple solution is given desktop image module some unique class like

desktop-banner-image and write CSS code.

@media (max-width: 767px) {
  .desktop-banner-image {
      display:none !important;  
  }
}

 

Did my post help answer your query? Help the Community by marking it as a solution.

TRooInbound Team

more help please visit at www.trooinbound.com or email at hello@trooinbound.com

MiaPV
Top Contributor

Having trouble getting only one background to show for mobile

SOLVE

Thank you so much @TRooInbound and @Jsum - for some reason I never got an alert that anyone replied and am just seeing this now. You two are great 🙂

TRooInbound
Key Advisor

Having trouble getting only one background to show for mobile

SOLVE

Hi @MiaPV,

 

Cool.

Did my post help answer your query? Help the Community by marking it as a solution.

 

I think you have checked not receiving an email from HubSpot community email from my setting. 

agfag.PNG

 

if a checkbox is checked then please uncheck so you will receive an email if someone answers your question 

 

Thanks,

Team TRooinbound

0 Upvotes
MiaPV
Top Contributor

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.

Thanks!

0 Upvotes