Mobile phone display

Backlight 4, 5 & 6 Support
#1

I have a site ( https://pideja.ca/galleries/01_duceppe/2024-2025/4-vie-intelligente/#gallery-3 that displays the single image as a slide show. This was done in order to always have a full image on screen, no matter what screen size.
However, I find that on the mobile phone, the images are small and the arrows that appear on each side are a distraction.
Could I control this display on the phone thru CSS? Like reverting to the regular single image display?
I already have this in the CSS file:
`.single_image figcaption {
text-align : center;
font-size : 1rem;
color : #e0e0e0;
}
.thumbnail {
position : relative;
width : 150px;
height : 150px;
overflow : hidden;
}
This as always been in the mobile section of my CSS, but since I reverted to “slideshow” in Backlight/Photo presentation, it affects the mobile as well.

#2

If you want to apply styling separately to desktop vs. mobile, use media queries to scope your CSS. I suggest using either min-width or max-width rules to set a breakpoint. There are examples of this throughout your site’s existing CSS if you want to see what size values are being used for breakpoints.

#3

I’m sorry, but this snippet of code is not having an effect on the mobile display. Where did I go wrong?

/*--------------------------------------------- iPhone  portrait ----------------------------------------------*/
@media screen and (min-width: 414px) and (orientation: portrait)  {
.the__copy {
font-size : 1rem;
line-height : 1.5rem;
margin-top : 10px;
padding : 0;
}
.slug-about .the__copy {
background-color : #393939;
margin-top : 10px;
/*padding : 50px 50px 0 50px;*/
}
#main-copy-credits {
display : block;
font-size : 0.9rem;
font-weight : 400;
line-height : 7px;
margin : auto;
overflow : hidden;
text-align : center;
white-space : nowrap;
width : 300px;
}
.single_image figcaption {
text-align : center;
font-size : 1rem;
color : #e0e0e0;
}
.thumbnail {
position : relative;
width : 150px;
height : 150px;
overflow : hidden;
}

I’m still in slide show mode on the phone.

#4

it has nothing to do with the slide show container.

#5

min-width: 414px will apply to displays 414-pixels and larger; you probably want to use max-width instead.