I would like to fix this issue I have, my slider images on mobile are the way I want them but when I check desktop the images get cut off and text gets moved to the middle of the image. Is there any way I can resize the image just for desktop and move the text to the bottom like on mobile?
I am using the minimal theme, URL: spacecasesofficial.com
Thanks in advance.
For different images mobile vs desktop, you can use the srcset attribute: https://www.w3schools.com/tags/att_source_srcset.asp
For changing the styling of an element depending on screen size, you can use CSS media queries.
For example, let’s say by desktop your theme grid is 800px or larger, and your image has a class called “hero-banner”, and you want that image to be 100% width of its container. You would do this:
@media screen and (min-width: 800px) {
.hero-banner {
width: 100%;
}
}
Or, maybe your theme CSS is limiting the height of the image (similar to cutting it off), then you could try preventing that by doing something like this:
@media screen and (min-width: 800px) {
.hero-banner {
height: 100%;
// If that doesn't work, you could try setting a fixed height, example height: 500px;
}
}
For help editing your theme code, and inspecting / editing CSS live in the browser to see what code you need to use: https://speedboostr.com/how-to-safely-edit-your-shopify-theme/
Hi, thank you for replying. I tried modifying the CSS, I looked for “@media screen” and raised the height but nothing changed. I couldn’t find “hero-banner” on my theme.scss either, sorry I’m new to this. What is a srcset attribute?
