Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1184848

    Hi,

    I’m using a colored square symbol (SVG file) in a text field, followed by a text line.

    1.
    On desktop screen, how can I indent and align a second text line with the first text line?

    2.
    On mobile screen, for space reasons, there’s a responsive break of the first text line. How can I indent and align the second part of the text line with the first part of the text line?

    Best regards,

    zizibe1

    #1185315

    Hey zizibe1,

    Please try moving the image out of the h1. It cannot be adjusted the way it is now.

    Best regards,
    Victoria

    #1185384

    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

    #1185436

    Hi zizibe1,

    I understand what you need :) I’m just telling you that the html layout is not ideal for this.

    You have h1 – img – /h1

    I am asking you to do

    img – h1 /h1

    Then maybe it will be easier to help you get the look that you want.

    Best regards,
    Victoria

    #1185474

    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

    #1185679

    Hi zizibe1,

    You might want to give the first h1 a class to make it easy to adjust css to apply just to it.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      #av_section_2 .av_textblock_section .avia_textblock > div + h1 {
        margin-bottom: 50px;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1185869

    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

    #1186418

    Hi zizibe1,

    Yes, please add a class to the first h1 and we will adjust the css :)

    Best regards,
    Victoria

    #1186575

    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

    #1187622

    Hi,

    Thank you for the update.

    There are some errors in the css code. The css media query is supposed to wrap the css declarations or styles, not the other way around and you can also omit the other selectors since you already specify a class attribute for the text block. Please replace the css code with the following.

    @media only screen and (max-width: 767px) {
        /* Don't overlap 2nd h1 in footer */
        .responsive #top .dq-no-overlap-2nd-h1 h1 { 
            margin-bottom: 50px;
        } 
    
        /* add more mobile styles here... */
    }

    Best regards,
    Ismael

    #1188526

    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

    #1188759

    Hi,

    Thank you for the info.

    The h1 is not responding or resizing properly because of its inline height property, which is set to 55px. You should remove the height and the let browser resize it.

    
    <h1 style="margin-left: 55px; position: relative; top: -10px;">Your text</h1>
    

    You should also remove the css code and horizontal separator below the h1 to lessen the gap between the headings.

    .responsive #top .dq-no-overlap-2nd-h1 h1 {
    	margin-bottom: 50px;
    }
    

    It should look like the screenshot below once all of the above is done.

    Best regards,
    Ismael

    • This reply was modified 1 month ago by  Rikard.
    • This reply was modified 1 month ago by  Rikard.
    #1188836
    This reply has been marked as private.
    #1189147

    Hi,

    Thanks for the update. I’ve edited Ismaels response according to your wishes.

    Best regards,
    Rikard

    #1189249

    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

    #1189340

    Hi,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Indent and align second text line on desktop and mobile screen’ is closed to new replies.