Shift my "shop all" button to the left side

[Alex087]

hello,

I'm using the Dawn theme, I want to shift my button "shop all" from the center to the left.

This button is on the top banner of the homepage.

I want to edit the code but I want don't what to add.

Thanx for your help

Alex

[Made4uo-Ribe · Accepted solution]

Hi @Alex087 

Try this one.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner__content.banner__content--bottom-center.page-width {
    justify-content: left !important;
}

• And Save.
• Result:
• 

  Let me know if you like more farther left. 

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Moeed]

Hey @Alex087 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[Alex087]

Hi Moeed, 

Problem is on desktop,

Thanx

[Moeed]

Hey @Alex087 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.banner__content.banner__content--bottom-center.page-width {
    justify-content: left !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe · Accepted solution]

Hi @Alex087 

Try this one.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner__content.banner__content--bottom-center.page-width {
    justify-content: left !important;
}

• And Save.
• Result:
• 

  Let me know if you like more farther left. 

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Alex087]

ho thank you very much! I would appreciate to be able to have more granularity on this alignment if it is possible. Also, is it possible to edit this alignment on smartphone?

[Made4uo-Ribe]

It would be same position in other screen for the desktop. Yes, we can align also in the mobile. Do you like also align in the left? same on the desktop?

Same like this?

Same Instruction.

@media only screen and (max-width: 749px) {
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
    text-align: left;
    align-self: flex-end;
}
}

Result:

Almost same in the desktop. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PhiviaAlexandou]

how do we align the slideshow button at specific positions instead of only left/right/center but with numbers? 

[Moeed]

Hey @PhiviaAlexandou 

Can you share your Store URL and a screenshot where you want to align it and I can help you out then?

Best Regards,

Moeed

[PhiviaAlexandou]

@Moeed yes, I can, but I just want the code to play around with the numbers. I don't need a 1 time code.. I want to change the values of the code myself to choose different positions based on the image. 

[Moeed]

Hey @PhiviaAlexandou 

Yes, don't worry. I'll provide you a code of which you can adjust the values by yourself as well depending on the picture.

Best Regards,

Moeed

[PhiviaAlexandou]

https://www.sassyangels.co/ 

I don't have a slideshow on the published craft theme, I'm working on a new dawn theme.

[Moeed]

Can you share the preview URL of the dawn theme?

[PhiviaAlexandou]

https://www.sassyangels.co/?_ab=0&_fd=0&_sc=1

@Moeed 

[Moeed]

Hey @PhiviaAlexandou 

This is also the URL of the live theme, when you open your website on a draft theme, the should be a button called "Share Preview" 

Best Regards,

Moeed

[PhiviaAlexandou]

hey, sorry, this is the correct link https://fpcd4ylarvl3aluv-41826386080.shopifypreview.com/

[PhiviaAlexandou]

hey, sorry, this is the correct link https://fpcd4ylarvl3aluv-41826386080.shopifypreview.com/

@Moeed 

[Made4uo-Ribe]

Are you referring to using pixels (px)? The positioning of your button will depend on your preferences. If it's not aligning correctly with the left or right properties, you may need to adjust its position using margins and padding.

[PhiviaAlexandou]

yes, something like this; but I still cant understand it..

.slideshow__btn--center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

if lets say I want to align the button top centered but higher than the default value.. do I change /* Top: 30% */ ?

@Made4uo-Ribe 

[PageFly-Richard · Accepted solution]

Hi @Alex087 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css, Theme.css, or Style.css

.banner__content.banner__content--bottom-center.page-width {
    justify-content: left;
}
@media(max-width: 767px){
.banner__content.banner__content--bottom-center.page-width {
    justify-content: center;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

[Alex087]

Thank you, I would like to have more precision on the placement of this button. Also, I would like to adjust on mobiles website version.