Mobile view issue: Only the header and first hero images display; image blocks in a copied custom section are hidden on mobile, while associated text blocks do show.
Context and attempts: The store uses the Whisper Shopify theme. The user copied a developer-built custom section they like. They cleared cache, ensured images are ~100–200 KB, and tested on multiple devices.
Requests:
Step-by-step, preferably no-code fix to make all images display on mobile.
Guidance on reducing image display size across sections (images appear too large) and adding more, smaller images.
Constraints: The user prefers avoiding coding changes and wants actionable instructions to proceed quickly before publishing the shop.
Status: No answers or solutions yet; the question remains open with unresolved display and image sizing concerns.
Summarized with AI on December 11.
AI used: gpt-5.
Hi everybody, the mobile view of whisper theme is only showing the pictures of header and first hero. The developer built a custom section I liked most, so I copied it, but especially these picture-blocks are not visible in the mobile view. Only the text-block of this group is visible. What exactly can I do? Hopefully without coding.
Also, where is it possible to change the size of the pictures itself? Every section and block only contains a kinda huge pictures. Would like to add some more pictures, in smaler versions.
By the way, I already emptied my cache, all my pictures are round about 100-200 KB and I checked it from several devices.
If anyone knows the answers, could you please give me a step-by-step instruction. I’m researching and trying out already some days and would really love go publishing my shop and selling my product!
Great description of the problem. Two quick wins first: the images showing on desktop but not mobile is almost always a visibility/responsive setting on the section/block or the copied custom section carrying a “desktop-only” behavior. And the “images too large” issue is usually either the theme’s image ratio/size setting or just image files that aren’t being constrained by the section.
Below is a step-by-step you can follow (no coding first), then a short optional CSS fix if you’re comfortable editing theme files.
1) Confirm in the Theme Editor (no code)
Go to Online Store → Themes → Customize (open the live theme).
In the top toolbar of the editor, switch the device preview to Mobile.
Navigate to the page/section where the image-blocks are missing. This shows you what the theme actually renders on small screens.
2) Check section & block settings (no code)
Click the section that contains the picture-blocks. Expand each block inside that section.
Look for toggles/fields labelled “Hide on mobile”, “Visibility”, “Show on desktop only”, or similar — some themes add these per-block. If any are enabled, turn them off.
If the section has an “Image type” or “Image position / Layout” option, try switching that (for example from “Background image” to “Image block” or vice versa) and preview mobile again.
3) If you copied a custom section, re-check how images are added
If the original developer used background images for those blocks, some themes intentionally hide background images on small screens to improve performance. Try replacing a background image with an explicit Image block (image element) in the editor and preview mobile.
If the custom section has a Desktop / Mobile image pair (two fields), make sure the mobile image field is populated.
4) Reduce image size & control image display (no code)
In the editor, click each image block and look for Image size / Aspect ratio / Crop settings. Set to a smaller ratio (e.g., “Portrait” or “Square”) if available.
If your theme does not expose size controls, create resized versions of the images (e.g., 600–800 px wide for mobile) and upload those smaller files for the blocks you want smaller.
5) Quick troubleshooting checklist
Test with a default theme image block (create a new section and add a plain Image block). If that also hides on mobile, theme/global settings are likely the cause.
Try duplicating the page/section and replace one image with a known working image (like the hero image). If it shows, the problem is image-source related.
Clear cache / preview in Incognito to be sure — you already did that, nice.
6) Minimal CSS fallback (if nothing else works)
If you’re okay with a tiny code change, this forces image blocks to show and scale on mobile. Add at the bottom of your theme CSS:
/* Force image blocks to show and be responsive on small screens */
@media (max-width: 767px) {
.your-section-class img,
.image-block img {
display: block !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover; /* or contain if you prefer */
}
/* If the section itself is hidden via a class, override it */
.your-section-class.hidden-on-mobile { display: block !important; }
}
Where to put it: Online Store → Themes → Actions → Edit code → assets/theme.css (or base.css / theme.scss.liquid) — paste at the bottom. Important: replace .your-section-class with the real class or try the generic .image-block img. If you’re not sure which class, I can write the exact CSS if you paste the section HTML/class name (or a screenshot of the DOM).
7) I can help, If you can share:
A screenshot of the Theme Editor (mobile view) with the section selected, or
The section/block settings screenshot, or
The copied section’s block HTML/class name (from Edit code),
Hi @MandasaTech
And this is an awesome answer. Thank you very much! Really appreciate your effort! With your seamless step-by-step instruction I even will follow the code-part.
Inbetween the time I was creative. My unprofessional solution was: The text-block of the custom built section had an option to choose a picture in the background. So I did that and voilĂ , the block was visible on mobile. Then I removed the buttons. When I removed the text-field the picture vanished again. So I played with the text and padding. I added a lot of blank space and a short slogan. That was my compromise No. 1.
No. 2: I picked a text section with symbols, swaped the symbols to pictures, and enlarged the size to the maximum. That was enough for my smaller pictures.
Well, this for sure is altogether just a short-term solution. I definitely will try your instructions and will give feedback how it worked. If I need further help I’ll com back with my questions (and screenshots etc.)
One thing I already can tell: The pixel size of my uploaded pictures didn’t do anything to change the frame size of the pictures in the theme. I tried that one already in several size versions.