How to make image banners section according to my need?

[BoldAttire]

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.....

[Shadab_dev]

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

[BoldAttire]

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.

[BoldAttire]

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

[Shadab_dev]

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

[BoldAttire]

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

[Shadab_dev · Accepted solution]

On the same file do this at the very bottom

@media(max-width: 767px){

.banner__content{

bottom: 0;

}

}

[BoldAttire]

thanku so much it resolved my issue!!!!!!!!!!

[Shadab_dev]

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

[BoldAttire]

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:

[Shadab_dev]

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