Jump to content

Homepage Banner Image Issues

Recommended Posts

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 

 

 

 

 

Coastal Website Banner VII       2020.jpg

Edited by Patterson
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

IMG_9276.PNG

Link to comment
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!

Link to comment
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
    }
}

image.thumb.png.7ae1e8453a0367617a9190def0773b51.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, Patterson said:

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

You can try inserting

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.