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
  • Views 464
  • Created
  • Last Reply
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.