How do I change the text alignment in my hero section?

Store Design
1

Hi Community,

i want to change the text alignment of my hero section:

On Desktop the text (with the links) should be above the picture just like on mobile but next to each other in one line.

My theme is flow

my url is https://www.betanics.de/pages/uber-uns

and password is Casaluna

I have basic knowledge in coding.

Thanks in advance :slightly_smiling_face:

Kathie

2

hello @Katharina_be can you please share a screenshot to change the text alignment of my hero section

3

Hello @Katharina_be

Can you share screenshot your hero image that text on the image on mobile?

4

@Katharina_be

Can you provide a screenshot which text you need to align?

5

Hi, please find the screenshots attached.

Thanks :slightly_smiling_face:

6

@Katharina_be - please add given css to the very end of theme.min.css file and check, it should be like given screenshot

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper{flex-direction: column;}

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper .large--two-thirds{order: 2;}

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper .large--one-third{order: 1;}

suyash1_0-1631512316184.png
suyash1_0-1631512316184.png1366×768 75.9 KB

7

it worked! Thanks :slightly_smiling_face:

Now it is the same like on mobile.

Would it be also possible to put all three names into one line (see attachement)? So it does not take up so much space.

Thanks

8

@Katharina_be - please try this

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper .large--one-third .homepage-hero-menu ul{display: flex;    align-items: center;}

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper .large--one-third .homepage-hero-menu ul li{    margin-top: 0; padding:5px;}

also please add width: 50%; after order:1, adjust number 50 as per need, it is for space, so it becomes

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper .large--one-third {
    order: 1;
    width: 50%;
}

suyash1_0-1631513032903.png
suyash1_0-1631513032903.png1366×768 134 KB

9

Thank you!

It looks almost perfect.

How can i increase the space in between the names?

10

@Katharina_be - try by increasing 50% to high number, else we can try to use padding

11

increasing the number shifts all names to the left (i have it currently at 100%).

Do you have some code for the padding?

Thanks

12

@Katharina_be - you can try by making it 100% and add this css width: 33.33%; after padding5px, so it becomes

#shopify-section-advanced-layout--hero3 .homepage-hero-wrapper .large--one-third .homepage-hero-menu ul li {
    margin-top: -50px;
    padding: 5px;
    width: 33.33%;
}

suyash1_0-1631515019868.png
suyash1_0-1631515019868.png1366×768 83.7 KB

13

awesome!

Thank you, great work