Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1187308

    Hi,
    There is a color section in my site and inside the color section, there are several text blocks & buttons which are center aligned vertically. This works fine.
    But now, I want to add a footnote inside the same color section which needs to be bottom aligned to the color section, but without affecting the other text blocks. Please let me know how can I achieve that?

    #1187421

    Hey tronicszone,

    Can you give us a link to your site? and maybe a screenshot or mockup of what you want to achieve, so we can see it without misunderstanding and hopefully could give you some CSS codes that should help :)

    Best regards,
    Nikko

    #1187435

    Hello,
    Thanks for your response.
    Here is the link: https://www.tronicszone.com/
    You can see towards the top of this page, within the first color section, there is a text block in small font starting with “Note:”.
    This is the text I’m trying to bottom-left align to the color section.

    • This reply was modified 4 years, 9 months ago by tronicszone.
    #1187442

    Hi tronicszone,

    Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:

    #footnote_text {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    Let us know if this helps.

    Best regards,
    Nikko

    #1187447

    Hi Nikko,
    Its got the text bottom aligned which is good. But its not fully left aligned, there seems to be some big padding to the left of the text.

    #1187461

    Hi tronicszone,

    Yes, that’s the limitation because of the container :(
    Can you try to create another section, add an ID (Developer ID) to it (example note-section), then move the note there.
    Set the settings similar to Trusted Partners for Electronic Design section so it doesn’t have a padding.
    In Quick CSS, add this CSS code (remove the code I gave before):

    #note-section .container,
    #note-section .container .template-page {
      position: static;
    }
    
    #footnote_text {
        position: absolute;
        left: 0;
        top: -33px;
    }

    Just adjust the top value.
    Hope this helps.

    Best regards,
    Nikko

    #1187615

    Hi Nikko,
    Thanks for your suggestion. I’ve tried it, but now the note text disappears completely & there is a gap due to the new section added.

    #1187702

    Hi tronicszone,

    Thanks for following the steps above, I have checked it and you just need to add this CSS code :)

    #note-section {
        position: relative;
        min-height: 0 !important;
        height: 0 !important;
    }

    Let us know if you need further assistance.

    Best regards,
    Nikko

    #1187764

    Worked like a charm. Thanks!

    #1187835

    Hi tronicszone,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘vertical align a text block within color section’ is closed to new replies.