How can I modify mobile text layout for a better view?

Store Design
1

Hi Community,

i have this text section with 3 times 2 words on it. On desktop it is perfectly fine. But on mobile the words are getting separated (see image).

I would like this to look like

"be resposible

be sustainable

be tanics"

so each 2 words in a new line.

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

hii, @Katharina_be
Paste this code on top of the theme.scss file.

@media only screen and (max-width: 768px) {
h2.homepage-sections--title {
    width: 220px !important;
}
}

Thank You.

3

Hi @Katharina_be ,

@media only screen and(max-width:749px){
h2.homepage-sections--title {
    max-width: 221px;
    width: 100%;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)