How to make image banners section according to my need?

Topic summary

A user is experiencing layout issues with the image_banner section in Shopify’s Dawn theme. The section contains two images with overlaid content (heading, text, button), which displays correctly on mobile but has misaligned content on desktop.

The Problem:

  • Content should be confined and center-aligned within one specific image
  • Desktop view shows content misalignment across both images
  • Mobile view works as intended

Solution Provided:
A developer (Shadab_dev) offered CSS fixes to be added to the section-image-banner.css file:

  1. Desktop alignment - Added media query targeting min-width 768px to set banner box width to 45% (important)
  2. Mobile refinement - Added media query for max-width 767px to adjust banner content bottom margin to 0

These CSS modifications successfully resolved the alignment issues on both desktop and mobile views.

Follow-up Request:
The original poster now wants to add an image between the text and button within the confined content area. The developer indicated this requires theme file modifications and custom styling, suggesting a small fee for the additional work and requesting collaborator access to implement the changes.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.

Hi, i have used image_banner section in my shopify dawn theme but it is not behaving like what i want. see image_banner can contain two images which will take size according to the view-port but when i insert content like heading and paragraph with a button it is not pleasant in the desktop view. it’s alignment is totally messed up in desktop view but it is taking right alignment in mobile view. see these two images for reference.

This is what i am getting:

This is what i want:

it should remain seperate. means content must remain in one image and should take alignment according to that specific image or div only. it should not be messed up in desktop view.like below image:

store url with password is shared in below image:

help me to resolve this issue…

So you need two images on desktop view but not stick together but have space between them. If I am getting this right then you can upload two images one for desktop and one for mobile.

So for desktop use canva or any other tool to have two images in one single image like you want. And for mobile any one.

You have kind of posted a lot more photos and kind of mixed it up with image and content, so it’s kind of confusing as well. Trying to suggest as I understood this.

Best

Shadab

i want images as it is but content aligned according to second image which is center aligned in one image. by content i mean heading, text and button. the content is ok in mobile view just in desktop view it is not aligned and confined in second image.

if it is difficult let me know how to make only second image clickable…please help with this issue

Sorry for the late reply, but one thing is you were able to move it to the right side. To completely contain it within the right side add this to the very bottom of section-image-banner.css file

@media(min-width: 768px){

.banner__box{

width: 45% !important;

}

}

This will confine it to the right side like this

but in mobile view it still doesn’t confined in the second image see screenshot:

On the same file do this at the very bottom

@media(max-width: 767px){

.banner__content{

bottom: 0;

}

}

thanku so much it resolved my issue!!!

I can feel the satisfaction in your comment and it is a great feeling. Glad i could be of help Alhamdulillah.

Until next time, Good luck on your store and your Business.

Best
Shadab

1 Like

can you also give code to insert image between the text and the button in second image where text is confined in second image? like the below image:

Yeah, I can and to be honest this ain’t too advanced as well but this will need modifying some code in the theme file and also styling purposes.

So I would definitely ask for a small fee for this and if you are ok I will need collaborator access to your store to edit code.

If this sounds any good, please reach out via personal links below for a convenient conversation and collaboration.

Best

Shadab