Support » Theme: Go » Hero Image not resizing down on mobile

  • When you pull this up on a mobile device, you can’t see the entire image as you can on a desktop. How do we resize that hero background image to scale down with browser width for mobile?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @cwsartain,

    Thank you for reaching out.

    Please try using the following CSS code:

    @media (min-width: 320px) and (max-width: 580px) {
      
      .wp-block-coblocks-hero > div
      {
        height: 150px !important;
      }
    }

    Let me know if this worked for you.
    Have a wonderful day 🙂

    Best Regards,
    Pavle

    Good morning @gdpavle . Nothing is happening when I add that CSS code. Here’s a snippet of all of my CSS code to ensure there isn’t any conflicting items.

    .header__extras {display:none;}
    
    .menu-is-open .header__navigation a {
    	font-size: 2rem;}
    .header__navigation-inner a {
    	font-size: 30px;}
    
    @media (min-width: 320px) and (max-width: 580px) {
      
      .wp-block-coblocks-hero > div
      {
        height: 150px !important;
      }
    }
    
    • This reply was modified 1 month, 1 week ago by cwsartain.

    Hey @cwsartain,

    Please try the following CSS code:

    #post-14 > div > div > div.wp-block-coblocks-hero.alignfull.coblocks-hero-912121228826 > div
    {
      height: 150px !important;
    }

    Let me know if this worked for you.

    Best Regards,
    Pavle

    Hi @gdpavle unfortunately that doesn’t seem to work either. The hero background doesn’t adjust at all with either of those CSS codes. What else should I try?

    Thanks for your help thus far!

    I’m able to get it to the right size for mobile by using this.

    #post-14 > div > div > div.wp-block-coblocks-hero.alignfull.coblocks-hero-912121228826 > div
    {
      min-height: 150px !important;
    }
    

    However, it applies it to everything. Mobile and desktop. I only want to apply this to mobile.

    • This reply was modified 1 month, 1 week ago by cwsartain.
    • This reply was modified 1 month, 1 week ago by cwsartain.

    Nevermind. I figured it out by combining them into this. Thanks so much for your help!!!

    @media (min-width: 320px) and (max-width: 580px) {
      
      #post-14 > div > div > div.wp-block-coblocks-hero.alignfull.coblocks-hero-912121228826 > div
    {
      min-height: 150px !important;
    }
    }
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.