-
Posts
-
Hello.
I’m using justify text alignment as default for all <p> elements.
Recently Enfold team helped me sharing some CSS code to take text-align center to a slide caption, which did’nt work since I needed justified text in this site. Yours was a great solution.
However, I need to apply center text alignment to subheadings into Special Heading element too. I could not figure out how to do this, due to I don’t know and am not able to manage Avia Builder structure and complexity. I need your support again.
Thank you very much in advance.
Eduardo
Hey Eduardo,
Thank you for the inquiry.
However, I need to apply center text alignment to subheadings into Special Heading element too
Have you tried adjusting the Content > Heading Style of the Special Heading element? You can select one of the “centered” options to center-align the heading.
Best regards,
IsmaelSure I have, all three options. I want to use Modern Header though.
The problem is due to I’m using CSS code to justify all <p> elements, because alignment is not part of typography settings nor the Advanced Styles. So, I needed to add the following custom CSS:
p, li {
text-align: justify;
}When I block this instruction by commenting it, center alignment in subheading works well. Nevertheless, I would like to have both styles working together.
Is there any CSS code that could be applied to Avia elements to get this? The one you suggested me for slider caption works very well (#top .avia-slideshow .av-slideshow-caption.av-m2fnm33t-7194a2c2891f3e7874849bd5c29c844f__0 .avia-caption-content p { text-align: center; })
See the first column at https://franco.integracionwebmx.com/contacto/#mapas
Best regards.
Hi,
Thank you for the update.
We are not really seeing the issue in the page. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. This might help: https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Best regards,
IsmaelThank you Ismael.
Let’s see if this gallery is good enough for you to see what I mean.
First image is my custom CSS panel with general <p> alignment centered.
Second image shows Special Header settings
Third image represents how Heading and its Subheading looks like (Oficina Central centered, while adress is left aligned).
Fourth image shows that when I cancel CSS <p> attribute, then
Fifth image with address centered tooBest regards.
indeed the subheading text is inside a p-tag.
Your ruleset is a little too general. The selector includes all p-tags. Either choose a selector that only includes p-tags (li-tags) that are in the text block element, or exclude the subheadings here.
instead of your general css use:
so describe a bit more if all p-tags should be influenced or only those inside a text-block element..avia_textblock p { text-align: justify; }or overwrite the generally held ruleset by presenting a more specific selector:
p, li { text-align: justify; } .modern-centered .av-subheading p { text-align: center; }Hi,
Thank you for the update.
You can try @Guenni007’s suggestion above.
p, li { text-align: justify; } .modern-centered .av-subheading p { text-align: center; }Best regards,
IsmaelThank you both for your support.
This second option is exactly what I expected. Nevertheless, indeed, the complete advise from Guenni007 helps me to unerstand better Enfold structure and how it works. I’m taking first solution applying justify alignment only to textblock element and eliminating additional CSS code I used to force changes on that general instruction applied to the whole <p> element. One instruction alone (the textblock one) works the same, but I think it’s a cleaner code.
Great support guys, as always.
Best regards,
EduardoHi,
Great! Glad to know that this has been resolved. Thanks to @Guenni007. Let us know if you have more questions.
Have a nice day.
Best regards,
Ismael
- The topic ‘Center Subheading when text default is justify’ is closed to new replies.