Jump to content

I want to show a different banner image on my mobile view (Bedford Template).

Recommended Posts

I've been scouring the web to find a way to display a different banner image for my mobile responsive site. The desktop banner is fine, but does not translate well at all. Would anyone be able to help out with any code to fix this? None of the solutions I've read work for the "Bedford Template".

Please and Thank you!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

3 hours ago, tuanphan said:

Can you share site url? We can check easier.

Sure thing! The site URL is: 

https://www.evanfzhu.com/resume-builder

The banner is fine on desktop, but would like to have the below image for responsive mobile:

https://images.squarespace-cdn.com/content/58a627e5db29d64e9763da1d/1612774118836-2BKODF0KVK113WO3BVRQ/RB-mobile-banner-1.png?content-type=image%2Fpng

Please and thank you!

Link to comment
19 hours ago, ezhu89 said:

Sure thing! The site URL is: 

https://www.evanfzhu.com/resume-builder

The banner is fine on desktop, but would like to have the below image for responsive mobile:

https://images.squarespace-cdn.com/content/58a627e5db29d64e9763da1d/1612774118836-2BKODF0KVK113WO3BVRQ/RB-mobile-banner-1.png?content-type=image%2Fpng

Please and thank you!

Add to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:768px) {
body#collection-6015e65bc1c9ac6a1fbd62a4 {
.banner-thumbnail-wrapper img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
.banner-thumbnail-wrapper {
    padding-top: 35px !important;
    padding-bottom: 35px !Important;
}
}
}

 

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
8 hours ago, tuanphan said:

Add to Design > Custom CSS


/* resize mobile banner */
@media screen and (max-width:768px) {
body#collection-6015e65bc1c9ac6a1fbd62a4 {
.banner-thumbnail-wrapper img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
.banner-thumbnail-wrapper {
    padding-top: 35px !important;
    padding-bottom: 35px !Important;
}
}
}

 

Amazing this works! Thank you so much!!!

As one the main issue is fixed, I do have another concern. Regarding this page: https://www.evanfzhu.com/randstad-jobs

I've done the same and applied the code switching out the collection ID and it works perfectly on mobile. However, the desktop banner is truncated a good bit and cuts off the words (image was created in identical sizing to the "resume builder" page). Is there a line of code to remedy this situation without directly affecting the mobile? Or is there another solution at hand to remedy this?

Please and Thank you!

Link to comment
On 2/10/2021 at 4:08 AM, ezhu89 said:

Amazing this works! Thank you so much!!!

As one the main issue is fixed, I do have another concern. Regarding this page: https://www.evanfzhu.com/randstad-jobs

I've done the same and applied the code switching out the collection ID and it works perfectly on mobile. However, the desktop banner is truncated a good bit and cuts off the words (image was created in identical sizing to the "resume builder" page). Is there a line of code to remedy this situation without directly affecting the mobile? Or is there another solution at hand to remedy this?

Please and Thank you!

Looksfine here. Can you explain clearly?

image.thumb.png.b9603c4fb2d1d429d4d90f27348344d2.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

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.