Home Banner Image Getting Cropped On Mobile

Site URL: https://gioandtheguns.com

I am wanting to see if there is any custom CSS that can be used to ensure the main homepage banner is completely displayed on mobile devices without getting majorly cropped. I know it may be a long shot, or I may need to set it up differently, but any help would be appreciated. Thanks!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .parallax-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}

body.homepage .parallax-item {
    height: 350px !important;
}
}

@tuanphan That works great! On mobile (only), for some reason the graphic below the banner image, and the mailing list aren't showing anymore.

On 9/16/2022 at 9:31 AM, cbannister said:

@tuanphan That works great! On mobile (only), for some reason the graphic below the banner image, and the mailing list aren't showing anymore.

Hi,

Can you take a screenshot of problem then remove the code, we will check it again

@tuanphan okay I have attached a screenshot WITH the code you provided (shows correctly formatted banner photo with social links beneath) and then screenshots of the mobile WITHOUT the code (incorrectly formatted banner with promo photo, mailing list, etc.) and also a screenshot of my custom css.

Hi,

You mean with the code, these sections disappear on mobile?

@tuanphan yes that is correct

On 9/22/2022 at 10:14 AM, cbannister said:

@tuanphan yes that is correct

Hi. Remove code I sent & use this new code

@media screen and (max-width:640px) {
body.homepage .has-main-image img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 100px !important;
}
body.homepage .title-desc-wrapper.over-image.has-main-image.first {
    min-height: unset;
    height: 300px;
}
}

@tuanphan that is almost it! For some reason that middle graphic is getting cut off. I have attached a screenshot

@tuanphan that works perfect! I really appreciate all of the help