Is there a way to make an image "fit" the block on desktop but "fill" block on mobile 7.1 fluid engine?

Site URL: https://nyf.squarespace.com/

password nyf2022

I am trying to make a sidebar design element on a long scrolling page and do not want the bar to get too wide. When I set the image to "fit" it works well on desktop but not on mobile, whereas "fill" is perfect on mobile but not desktop. Is it possible to customize CSS to make both work at once?

See the Announcements and Reports section at the bottom of the homepage.

Thanks!

You can set fit on desktop, then describe problem on mobile? We can help easier

27 minutes ago, tuanphan said:

You can set fit on desktop, then describe problem on mobile? We can help easier

@tuanphanAll of the colored bars on the left side of the page are set to "fill" except the last one, bright purple for Announcements & Reports, that one is set to "fit". I like the width of the "fit" bar best on desktop, but on mobile, the height is too short, it doesn't serve as a bar filling the space vertically. If I change the size of the bar image to accommodate mobile, it will be too skinny on desktop. Does this make sense?

Another way of looking at it is that all the other bars (set to "fill") work well on mobile, but on desktop, if you're on a wide screen, they are too wide! Narrower screens are ok, but want to make sure the look stays consistent across devices/widths.

You can also consider using CSS code to add it

Something like this. Here I used border-right, you just change it to border-left

body.homepage article {
section:nth-child(4), section:nth-child(5), section:nth-child(6), section:nth-child(7) {
    border-right: 50px solid #ffcf00;
}
section:nth-child(8), section:nth-child(9), section:nth-child(10), section:nth-child(13) {
    border-right: 50px solid #430668;
}
section:nth-child(11), section:nth-child(12) {
    border-right: 50px solid #f79e00;
}
/* set border width on mobile */
@media screen and (max-width:767px) {
section {
border-width: 20px !important;
}}}

4 hours ago, tuanphan said:

You can also consider using CSS code to add it

Something like this. Here I used border-right, you just change it to border-left

body.homepage article {
section:nth-child(4), section:nth-child(5), section:nth-child(6), section:nth-child(7) {
    border-right: 50px solid #ffcf00;
}
section:nth-child(8), section:nth-child(9), section:nth-child(10), section:nth-child(13) {
    border-right: 50px solid #430668;
}
section:nth-child(11), section:nth-child(12) {
    border-right: 50px solid #f79e00;
}
/* set border width on mobile */
@media screen and (max-width:767px) {
section {
border-width: 20px !important;
}}}

 

@tuanphan Ah, thank you! Much better solution!