I can choose the orientation on desktop, but it is not possible on mobile.
Thank you!
Topic summary
A user is trying to position text on top of an image in Shopify’s Craft theme for mobile devices, as the desktop orientation controls don’t apply to mobile.
Proposed Solution:
A CSS code snippet was provided that uses absolute positioning and z-index to overlay text on images for mobile screens (max-width: 767px). The code includes:
- Relative positioning for the grid container
- Absolute positioning for the text element with a semi-transparent background overlay
- Optional backdrop filter for brightness adjustment
Current Issue:
The user reported that the CSS solution blocks the entire image on mobile (screenshot provided), making it ineffective. The helper had cautioned that this approach works poorly with large amounts of text and recommended keeping text below images for better mobile readability.
Status: Unresolved - the CSS workaround didn’t produce the desired result.
1 Like
Try adding this CSS. But please note, if you have a lot of text, it’s not going to work well so having the text below image would be the best to ensure readability on most mobile devices.
@media (max-width:767px) {
.image-with-text__grid { position:relative; min-height:200px; }
.image-with-text__media-item { position:static!important; }
.image-with-text__text-item {
position:absolute!important;
inset:15px;
z-index:2;
padding:15px;
background:rgba(0,0,0,0.05); /* 5% dark overlay */
backdrop-filter:brightness(1.05); /* Optional subtle lightening */
}
.image-with-text__media { position:relative!important; height:100%; }
}
Hope that helps.
unfortunately blocking the whole image