Repositioning Image Banner buttons on Dawn Theme

Store Design
1

Hi there,

Im on my landing page for the Theme Dawn, and I wanted to reposition the buttons for the section Image Banner. I’ll be using both buttons available in the section, they’re currently positioned at the bottom of the Image banner and i want to move them to the middle of the image banner and have a bigger spacing in between the two buttons. I’d appreciate it very much for advices and help!

-Jordan

2

Hi @Jordan_tbk ,

Please share your store URL and if your store is password protected then please provide password too.
You can take a picture of the place you want to edit.

So that we can help you.

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

4

Hi @Jordan_tbk ,

  • With position: Refer:

Screenshot.png
Screenshot.png1555×636 89.6 KB

  • With spacing: Go to Assets > section-image-banner.css and paste this at the bottom of the file:
@media screen and (min-width: 750px){
	.banner__content .button:not(:only-child):first-child {
		margin-right: 100px !important;
	}
}
5

Thanks For Helping! but someone gave me another solution

6

Thanks for helping Denishamakwana! But someone else gave another solution

7

Hi @Jordan_tbk ,

You haven’t done what you want? Please send me the site link, I will check it for you

8

Hi @Jordan_tbk ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css->paste below code at the bottom of the file:
@media screen and (min-width: 750px){
	.banner__content .button:not(:only-child):first-child {
		margin-right: 100px !important;
	}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

9

Hi AvadaCommerce, is it possible to re-position button placement on mobile. I would like the explore button bottom centre of the banner.

socconnor_0-1695718353047.png
socconnor_0-1695718353047.png418×390 29.2 KB

10

What was the solution?

11

Sorry it’s been so long I forgot, I don’t even remember I started a thread :joy: . But I think what I did was go to Udemy, took a course on HTML5 and got it done. Sorry it’s not so helpful, time and money costing method but hey you’ll know how to do it yourself next time, also useful for yourself. Hopefully some programming guru on YouTube can help you out. Smileys