Okay
  Public Ticket #1257137
Hero Header not displaying properly on mobile
Closed

Comments

  • sportbilly9323 started the conversation

    On mobile the header is cropped. How do I fix this?

    Attached files:  mobile_portrait.png
      mobile_LANDSCAPE.png

  • sportbilly9323 replied

    A similar issue is happening within Safari.

    Attached files:  safari_isues.png

  •  48
    Joe replied

    This seems to be happening due to the customization of the hero height. You may need to adjust the min-height multiple times based on media queries to get stop it from cropping... or, remove the custom css that is setting the smaller height. So, start by removing the previous custom css and add something like:

    @media (min-width: 768px) and (max-width: 1099px) {
      .apex-hero {
        min-height: 80% !important;
      }	
    }
    @media (min-width: 1100px) {
      .apex-hero {
        min-height: 60% !important;
      }	
    }
    
    Adjust, and add to as necessary to stop the cropping at different screen sizes.