my web：www.bmcarcover.com
I want the size of the slide picture square for mobile device, not rectangle
Topic summary
A user wants to display square slideshow images on mobile devices instead of rectangular ones on their website (bmcarcover.com). The current implementation shows the same rectangular images across all devices.
Solution Provided:
- Create two separate slideshow sections: one for desktop and one for mobile
- Use different image formats for each section (square for mobile, rectangle for desktop)
- Apply CSS media queries to hide the desktop section on mobile devices and vice versa
Implementation:
- Mobile section CSS: Hide when screen width ≥ 750px
- Desktop section CSS: Hide when screen width ≤ 749px
Status: Issue resolved. The user confirmed the solution worked for their needs.
You can add another slideshow section for mobile, so you can use other images for mobile, then add CSS code to each section to hide desktop section on mobile and mobile section on desktop.
Add this code to custom CSS of mobile section
@media (min-width: 750px) {
slideshow-component { display: none; }
}
And this code is for Custom CSS of desktop section
@media (max-width: 749px) {
slideshow-component { display: none; }
}
oh！thank you
1 Like
Happy I could help!