Indent and align second text line on desktop and mobile screen

Hi Victoria,

Thank you for your reply.

I don’t want to remove the colored square symbol at the beginning of the text line because it’s part of the company’s corporate identity and should be part of the web design too.

In the software I’m using for print media, I can simply set a tabulator to indent and align the second text line with the first text line.

But how can I solve this problem in Enfold?

And please answer also my second question: On mobile screen, for space reasons, there’s a responsive break of the first text line. How can the second part of the first text line be automatically indented and aligned with the first part of the first text line?

Please find a new screenshot in the private content area.

Many thanks in advance.

Best regards,

zizibe1

Hi Victoria,

Thank you for your answer.

As you suggested, I changed the code like this:

<img class="alignnone size-full wp-image-5127" src="[URL of SVG file]" width="27" height="27" />
<h1>[1. text line]
[2. text line]</h1>

(In the code, the URL of the SVG file is replaced by [URL of SVG file], the first text line by [1. text line] and the second text line by [2. text line])

To place the first text line on same height as the SVG file, I tried the following code which I found online:

<div style="float: left; width: 27px; height: 27px;"><img class="alignnone size-full wp-image-5127" src="[URL of SVG file]" width="27" height="27" /></div>
<h1 style="margin-left: 55px; height: 55px; position: relative; top: -10px;">[1. text line]
[2. text line]</h1>

On desktop, it looks alright now. But on mobile screen, the second part of the first text line is overlapping the second text line.

How can I fix this?

Please find a screenshot in the private content area.

Best regards,

zizibe1

Hi Victoria,

Thank you for the code.

I added it to the Quick CSS field and it worked.

Now, on mobile screen, there’s a massive gap between the second h1 and the third h1.

If I understand correctly, I should give the first h1 a class to avoid this.

But I don’t know how. Could you please explain me?

Best regards,

zizibe1

Hi Victoria,

Thanks for your reply.

I put the first h1 in a separate text block.

Then I opened this text block element and went to Advanced > Developer Settings > Custom CSS Class and added the following custom class name:

dq-no-overlap-2nd-h1

Finally, I clicked on “Save” and “Update”.

Then I added the following code to the bottom of the Quick CSS field:

/* Don't overlap 2nd h1 in footer */
#top .dq-no-overlap-2nd-h1 { @media only screen and (max-width: 767px) {
  #av_section_2 .av_textblock_section .avia_textblock > div + h1 {
    margin-bottom: 50px;
  }
} 
}

Then I clicked on “Save all changes” and “Update”.

Unfortunately, it didn’t work.

What did I wrong?

Best regards,

zizibe1

Hi Ismael,

Thank you for the explanation and the new code.

I went to the Quick CSS field and replaced the previous code by it.

When I change the size of the bowser window by pulling on it’s right corner, there’re still moments when the first and the second h1 overlap or when there’s a big gap between the first h1 and the second h1.

Please have a look at the screenshot in the private content area.

How can I fix this?

Best regards,

zizibe1

Hi Rikard,

Thank you for your effort.

I followed the instructions of Ismael and the h1 is responding properly now. So, this thread can be closed.

Thanks again!

Best regards,

zizibe1