Homepage Banner Image Issues

Site URL: https://www.coastalathletics.net/

Good evening,

the password to the site is 1313. 

I am trying to get the attached image to fully show on the websites homepage. As you can see most of the image is being cut short. I have tried numerous methods but am not sure where to go from here. Is there any custom CSS that could eliminate this problem?

Thank you in advance for your help, let me know if you have any questions. 

Template = bedford 

Add to Home > Design > Custom CSS

/* resize home mobile banner */
@media screen and (max-width:640px) {
.homepage .banner-thumbnail-wrapper.has-description figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.homepage .banner-thumbnail-wrapper.has-description {
    height: 35px;
}
.homepage .desc-wrapper p:empty {
    display: none !important;
}
.homepage .banner-thumbnail-wrapper.has-description p {
    position: relative;
    top: -50px;
}
}

5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* resize home mobile banner */
@media screen and (max-width:640px) {
.homepage .banner-thumbnail-wrapper.has-description figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.homepage .banner-thumbnail-wrapper.has-description {
    height: 35px;
}
.homepage .desc-wrapper p:empty {
    display: none !important;
}
.homepage .banner-thumbnail-wrapper.has-description p {
    position: relative;
    top: -50px;
}
}

 

Thank you for the help. The attached image is what I got when I inserted this code. As you can see I can see the whole image there is just that large cap which is undesirable. 

This issue is slightly happening on desktop view too but of course not to the same extent. We hope to be able to see every part of the image the whole time. Thanks again!

On 11/6/2020 at 5:04 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* resize home mobile banner */
@media screen and (max-width:640px) {
.homepage .banner-thumbnail-wrapper.has-description figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.homepage .banner-thumbnail-wrapper.has-description {
    height: 35px;
}
.homepage .desc-wrapper p:empty {
    display: none !important;
}
.homepage .banner-thumbnail-wrapper.has-description p {
    position: relative;
    top: -50px;
}
}

 

I tweaked this just a little and made it look okay enough to use! SO thank you greatly. 

One last question on like normal desktop view is there a way to bring the "learn more" button down further off the logo I think there should be no code I am using seems to work. Thanks!

On 11/8/2020 at 3:16 AM, Patterson said:

I tweaked this just a little and made it look okay enough to use! SO thank you greatly. 

One last question on like normal desktop view is there a way to bring the "learn more" button down further off the logo I think there should be no code I am using seems to work. Thanks!

Remove above code & use new code

@media screen and (max-width: 640px) {
    .homepage .banner-thumbnail-wrapper.has-description figure img {
        width:100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
    }
.homepage .banner-thumbnail-wrapper.has-description {
    height: 50px;
}
.homepage .banner-thumbnail-wrapper.has-description p {
        position: relative;
        top: -30px
    }
}

Is this the code affecting the button individually? That is my issue at the moment.

2 hours ago, Patterson said:

Is this the code affecting the button individually? That is my issue at the moment.

You can try inserting

1 hour ago, tuanphan said:

You can try inserting

Hello! Thanks for the quick response... I did and the button did not move and it messed up what I had altered from your previous code to make the mobile version of that banner better. 

Below is what I took from your Custom css and it is making my mobile version appear nearly perfect. Thank you again for your help with that... I just was't sure if there was a way to lower the button on normal browser view off the logo. Thanks!

/* resize home mobile banner */
@media screen and (max-width:640px) {
.homepage .banner-thumbnail-wrapper.has-description figure img {
    width: 100% !important;
    height: 85% !important;
    left: 0 !important;
}
.homepage .banner-thumbnail-wrapper.has-description {
    height: 5px;
}
.homepage .desc-wrapper p:empty {
    display: none !important;
}
.homepage .banner-thumbnail-wrapper.has-description p {
    position: relative;
    top: -30px;
}
}