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

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!

Can you share site url? We can check easier.

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!

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

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!

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?