Swap portfolio banner image on mobile

Site URL: http://www.roseandermain.com

Some of my portfolio banner images look good on desktop, but not mobile, so I'd like to be able to swap them. I have found explanations of CSS that I can add that targets a specific block ID, but not sure how to translate this idea to a handful of portfolio pages.

Thanks!

James

You mean change to another image on mobile? Which images? We can help easier

Hello Tuanphan,

I found a solution that involved making two sections - one with a desktop image, and one with a mobile image - the code below instructs which section to display, based on browser width.

/* RTP remove bottom banner in desktop */
@media screen and (min-width:768px) {
[data-section-id="61e3062937970d62de6463e2"]{display: none;}}
/* RTP remove top banner on mobile */
@media screen and (max-width:767px) {
[data-section-id="619d5990f1001a58cd6cbc4e"]{display: none;}}

It's a nice solution, but I needed to replicate this block for each portfolio page. In my initial question, I was hoping for a more elegant solution. But this works.

Cheers!

James