What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I adjust text alignment on my Dawn theme image banner?

Solved

How can I adjust text alignment on my Dawn theme image banner?

Christinahadi
Excursionist
34 0 5

Dear,

I want to change the text allignment on the head image banner on my homepage.

Can you help me with that?

Thank you

Kind regards, Christina

Accepted Solution (1)
HamishDavisonIC
Shopify Partner
62 9 70

This is an accepted solution.

@Christinahadi 

If you want to left align only the text on your image banner, go to section-image-banner.css and change this:

Schermata 2021-09-20 alle 15.55.56.png

View solution in original post

Replies 22 (22)

dmwwebartisan
Shopify Partner
12323 2552 3732

@Christinahadi 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Christinahadi
Excursionist
34 0 5
Kinjaldavra
Shopify Partner
2303 570 1426

hello @Christinahadi 

your store is password protected can you please share your shop preview URL

Christinahadi
Excursionist
34 0 5

Done

Kinjaldavra
Shopify Partner
2303 570 1426

hello @Christinahadi 

 

text alignment already center 

 

Christinahadi
Excursionist
34 0 5

Hello!

I would like it to be alligned to the left.

Is this possible?

Thanks!

Kinjaldavra
Shopify Partner
2303 570 1426

hello @Christinahadi 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-hero-1 .page-width.text-center{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(0%, -50%);
}

 

Christinahadi
Excursionist
34 0 5

Hello

Thx for your tip!

Unfortunately, it did not change things yet..

Am I missing something?

Thank you!

HamishDavisonIC
Shopify Partner
62 9 70

@Christinahadi 

 

try this

 

How to centre your headings on Dawn theme — Shopify 2.0 tutorials

All you need to do to center your headings on Dawn (and any theme that is Shopify 2.0) is:

 

Identify the problem

HamishDavisonIC_0-1632006231176.png

 

OK now go to your Shopify back end and edit your theme code:

HamishDavisonIC_1-1632006231160.png

 

HamishDavisonIC_2-1632006230904.png

 

HamishDavisonIC_3-1632006231174.png

 

Press control f and search for h1 then add

text-align: center;

And we’re done

Thanks!

diego_ezfy
Shopify Partner
2970 571 917

You currently have the debut theme online, not the dawn theme. If you'd like to have the dawn theme customized instead, please put it live so we can check the code.

To align the banner text to the left on the debut theme:@Christinahadi, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.hero__inner *{
    text-align: left;
}

.hero .mega-subtitle{
    margin-left: 0 !important;
}

 

diego_ezfy_0-1632006983831.png

Kind regards,
Diego

Christinahadi
Excursionist
34 0 5

Hi Diego,

Ah thanks so much for an aha-moment!

I've put the DAWN theme live, so you should be able to see it now.

If you could be so kind to give me the code to align the text to the left, i'm sure it'll work perfectly.

Thanks!

Christina

HamishDavisonIC
Shopify Partner
62 9 70

@Christinahadi 

go to base.css

text-align: left;

If you look at my original post there's a video on where to write it exactly

Once finished if it works please accept the answer with my video on it as an accepted solution in order to allow more people to find it

Hamish

Income stream surfer on Youtube

Christinahadi
Excursionist
34 0 5

Hi,

This did not solve my problem unfortunately.

Is there anyone that can help me aligning the text on the top image banner on the homepage TO THE LEFT (DAWN theme)?

Thanks!

HamishDavisonIC
Shopify Partner
62 9 70

HamishDavisonIC_0-1632058560690.png

 

Do you mean this image? If not please take a screenshot of which you mean

Christinahadi
Excursionist
34 0 5

Yes, it's about that image indeed!

Thanks!

Greetings

Christina

diego_ezfy
Shopify Partner
2970 571 917

@Christinahadi,

You're welcome.

Kindly make sure to click on the button "Accept as Solution" below whichever answer solved your problem.

This way people with similar issues can also benefit from this in the future.

Kind regards,
Diego

Christinahadi
Excursionist
34 0 5

If i'm not mistaken, this issue has not been resolved yet?

The text is not aligned to the left, and i have tried to paste the codes as proposed, but nothing changed.

Can someone still help me out please?

Thanks

HamishDavisonIC
Shopify Partner
62 9 70

@Christinahadi 

sorry I was busy yesterday

Schermata 2021-09-20 alle 15.01.36.png

Change where it says text-align and write left in place of center

Please make the post with my video on it the accepted solution

Hamish

Christinahadi
Excursionist
34 0 5

Thanks, it aligned the text indeed to the left.

But how can i align the text like this example? I have to also change the width and the position?

Christinahadi_0-1632145530987.png

Thank you

HamishDavisonIC
Shopify Partner
62 9 70

Try to make the text larger

HamishDavisonIC
Shopify Partner
62 9 70

This is an accepted solution.

@Christinahadi 

If you want to left align only the text on your image banner, go to section-image-banner.css and change this:

Schermata 2021-09-20 alle 15.55.56.png

Christinahadi
Excursionist
34 0 5

Thanks for the help!

It was in fact a combination of:

- aligning the text to the left

- enlarge the size (as per your example) to 7rem

- also enlarge the max-width from 51rem to 90rem

Christinahadi_0-1632147275913.png