How can I alter my hero section's text alignment?

Store Design
1

Hi Community,

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

Desktop: The text should be in the middle of the picture (see image attached)

Mobile: The text should be above the picture (see image attached)

My theme is flow

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

and password is schlauesmädchen

I have basic knowledge in coding.

Thanks in advance :slightly_smiling_face:

Kathie

2

hello @Katharina_be

can you please share page URL of share screenshot

3

Guten Morgen Kathi / @Katharina_be …

Adding this CSS (you know how?) should do the trick:

.homepage-hero-wrapper {
  display: flex;
}
@media screen and (max-width: 767px) {
  .homepage-hero-wrapper {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 768px) {
  .homepage-hero-wrapper {
    align-items: center;
  }
}

Result:

Screenshot 2021-09-04 at 09.49.09.jpg
Screenshot 2021-09-04 at 09.49.09.jpg960×1572 55 KB

Screenshot 2021-09-04 at 09.49.38.jpg
Screenshot 2021-09-04 at 09.49.38.jpg2038×1304 80.6 KB

Hope this helps!

Liebe Grüße aus Linz,
Mario

4

@Katharina_be had shared both in the initial post – a URL and screenshots … :wink:

Mario

5

hello @Katharina_be

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

.template-page  .homepage-hero-wrapper {
  display: flex;
}
@media screen and (max-width: 767px) {
  .template-page  .homepage-hero-wrapper {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 768px) {
  .template-page  .homepage-hero-wrapper {
    align-items: center;
  }
}
1 Like
6

@Kinjaldavra Thanks for repeating what I wrote.

@Katharina_be you can of course scope the selectors if you are using the section more than once and don’t want the behavior repeated on other instances. Since you mentioned you had some coding knowledge, I figured I would keep the answer as simple as necessary. It could need some refinement in terms of spacing too.

Mario

7

thanks @r8r ! Works just as expected :slightly_smiling_face:

Strangely it is not working on the hero on the homepage. Do you have an idea why?

In regards to spacing, i was able to lower top and bottom margin. Do you know, how i can increase the space between the image and the text? I don’t know i can address commands to single elements.

Appreciate your support :slightly_smiling_face:

Best

Kathie

@Kinjaldavra thanks for your comment, but @r8r s solution already works!

8

@Katharina_be

Strangely it is not working on the hero on the homepage. Do you have an idea why?

Do you mean this?

Screenshot 2021-09-04 at 13.31.49.jpg
Screenshot 2021-09-04 at 13.31.49.jpg2018×1166 134 KB

In the unscoped selector example (without the .template-page) it should work. Is the code applied already?

In regards to spacing, i was able to lower top and bottom margin. Do you know, how i can increase the space between the image and the text? I don’t know i can address commands to single elements.

What you can do is the following … not super clean, but it’s gonna work to address the different components (I call them “image block” and “text block” here):

.homepage-hero-wrapper > .grid-item:first-child {
  /* rules for the image block here */
}
.homepage-hero-wrapper > .grid-item:last-child {
  /* rules for the text block here */
}

You may also wrap these rules in the according media-blocks if needed.

Hope this helps!
Mario