-
AuthorPosts
-
February 24, 2020 at 12:59 pm #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?February 24, 2020 at 5:38 pm #1187421Hey 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,
NikkoFebruary 24, 2020 at 5:46 pm #1187435Hello,
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, 10 months ago by tronicszone.
February 24, 2020 at 5:58 pm #1187442Hi 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,
NikkoFebruary 24, 2020 at 6:03 pm #1187447Hi 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.February 24, 2020 at 6:26 pm #1187461Hi 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,
NikkoFebruary 25, 2020 at 9:07 am #1187615Hi 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.February 25, 2020 at 2:49 pm #1187702Hi 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,
NikkoFebruary 25, 2020 at 4:53 pm #1187764Worked like a charm. Thanks!
February 25, 2020 at 9:14 pm #1187835Hi tronicszone,
We’re glad that we could help :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘vertical align a text block within color section’ is closed to new replies.