How can I make images flush to the sides on mobile in craft theme?

Store Design
, ,

Topic summary

  • Goal: Make the Craft theme’s “Image with text” section display edge‑to‑edge on mobile (no white margins), while keeping the desktop layout unchanged. Similar to a full‑bleed banner/YouTube video on phones.

  • Context: Current mobile view shows white borders around the image. OP wants the section to behave like a banner on mobile but remain “image with text” on desktop.

  • Attempts: OP tried adding custom code via theme customization but saw issues (duplicated images, images cut in half). Switching themes isn’t an option.

  • Guidance given: Suggestion to generate code via tools and insert it in Custom Liquid/Custom HTML. Note that making it dynamic may require Shopify theme templating expertise or hiring a developer. CSS (styling rules) and Liquid (Shopify’s templating language) are relevant.

  • Latest update: OP provided example screenshots comparing desktop vs mobile and clarified the desired full‑bleed mobile result. Images are central to interpreting the request.

  • Status: No working code solution shared yet. The helper requested visuals (now provided). Awaiting a tailored CSS/Liquid snippet to achieve full‑bleed on mobile while preserving desktop behavior.

Summarized with AI on January 3. AI used: gpt-5.
1

Hello,

I’m still trying to figure out if there is a way in the craft theme. With the section “image with text” to have the image flush to the sides on mobile. But look the same on desktop. Is that like a custom code. The best I could describe it is currently there is a white border around the edges of the image and I would like for it to look like a YouTube video how it does all the way to the sides no border at all. Possible or no? I’ve asked before but like I really would love this code and it honestly would be the last edit I can see myself needing before actually going to a professional. Just trying to give myself the best shot possible

2

Hey there you can create the type of code as you like using the help of tools like ChatGPT or Gemini and then placing the code inside of Custom Liquid or Custom HTML, from the theme customisation as of starter. To make it dynamic or create a section you may have to hire a developer if you are not familiar with Shopify Theme templating.

3

I’ve been at this for over an hour. No matter how much I try I evern copy
the entire code. Its not giving me the results. Its double the images in
the screen,weird. its cut them in half weirder but all i want is this (
attached ) the top one is banner the bottom is image with text. I simply
want the image with text to act as a banner and display as a banner in
mobile while acting as an image with text in desktop. The bigger companies
all have it. And when I load an image with text on it manifests as that
banner image! then makes itself smaller so its possible. My brain literally
hurts.
Does it make sense? I know another theme would probably have it but I cant
really go that route right now

4

can you send me the sample or a screen shot explaining how exactly you need so i can make one and give it to you.

Hand drawing on a paper explaining that, will be fine as well

5

Hey! Just wondering if you were able to figure it out for me? Patiently
waiting

6

Hello I thought I replied but I did not sorry. It’s essentially this they’ll is browser while the bottom is on mobile. Do you see what I mean about no white edges? But in browser it looks a separate way. I think it might be CSS liquid code but idk let me know if it makes sense thanks

IMG_20240303_090012.jpg
IMG_20240303_090012.jpg4000×1824 1010 KB

Screenshot_2024-03-03-08-57-29-07_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2024-03-03-08-57-29-07_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×2340 185 KB