How can I add space between two banner images on the Dawn theme?

Hello,

I am using the theme “Dawn” and I am trying to achieve the following:

I added 2 images in the Banner section. By default using the native editor, these 2 images are one next to each other without the possibility to leave a space between the 2 pictures.

Questions:

  1. How can I add a separation in the middle between the 2 pictures and also a separation from the left and right side of each image.

  2. Additionally it would be amazing if it is possible to put a frame to the images ( orange colour frames).

Find the following sketch of what I wish to achieve:

I have tried the solutions of the following Adding Padding Between Two Image Banner post but the solution didn’t work, as it leaves a space with a brown colour and also it seems some text of the bottom goes up to the center of the page.

Thank you for your time and help! I really appreciate it :fire:

Hi @LluisClarens ,

Can i give a try? Would you mind to share your URL website? with password if its protected. Thanks!

Hi @Made4uo-Ribe , sorry I forgot to share it.

URL > https://fivestore.es/

Password: supportfivestore

Thank you fro the informatin. Which pages is this one? I cant find on the website you provide, you can also share the preview.

I am using this “backup” theme to perform changes, I will share you the preview URL > https://7yqolcj2ct72smlv-76635046231.shopifypreview.comhttps://fivestore.es/?_ab=0&_fd=0&_sc=1

Let me know if you are able to enter, the current URL to see the shop is fivestore.es which will requiere the password, and the english version is www.fivestore.es/en

Im sorry but still i cant enter. I also try in the incognito. The preview you provide also lead me to the store.

Hello Ribe,

Thank you for your answer and for trying to help me with this.

Maybe I am not providing you the correct URL? I am not sure what exactly to provide you.

You stated "The preview you provide also lead me to the store. " which exact site you need to reach?

I am providing you the following URL “Share Preview” of my backup theme where I perform the changes https://7yqolcj2ct72smlv-76635046231.shopifypreview.com :

But also I am trying to provide you the current published theme preview https://do4424555eavx4c0-76635046231.shopifypreview.com :

When I use an incognito window and reach www.fivestore.es I am able to use the password supportfivestore to enter in the shop:

Can you point me where is the URL you need if the above is not correct?

Once again, thank you for your help!

Sorry to give you difficulties, I check your Store but I cant find the page that youll like to redesign. The page you provide on the 1st post. Im ignoring the banner you have. Do youmean like this style in your banner?

This is the code.

.banner__media.media.banner__media-half img {
    width: 76%;
    height: 70%;
    margin: 70px;
    border: 1px solid orange;
    box-sizing: content-box;
    overflow: auto;
}
.media.banner__media-half {
    background: none;
}

Hello Ribe,

You are absolutely correct! , thats exactly what I am trying to achieve! :grinning_face:

I was trying to find where to inser the code you provided me. Is is in the “theme.liquid” file or maybe base.css?

I added it in the “theme.liquid” file before the " " and resulted in no changes in the page, find the following reference:

Don’t be sorry, you are not giving any difficulties, thank you for your time and attention!

Just paste it on the base.css, on the very end. Thanks!

Hello Ribe,

It has worked. Can I ask you one question regaring the code you provided me?

After adding the code the following text was added as well:

That text only appears afer inserting the code. I checked the code I am not able to see where is this text coming from. I have seen that in the picture you shared me on July 26th it also has this text.

Do you know if I need to edit the code you provided me to get rid of that text?

Oh it was there already, the text showed because we reduce the height it was cover with the images before. The CSS code I provide are not possible for inserting text. The only way that can insert text is using psuedo element. Do you like to remove the text?