Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1470288

    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

    #1470319

    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,
    Ismael

    #1470354

    Sure 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.

    • This reply was modified 1 week, 4 days ago by ezimbron.
    • This reply was modified 1 week, 4 days ago by ezimbron.
    #1470391

    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,
    Ismael

    #1470399

    Thank 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 too

    Best regards.

    #1470487

    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;
    }
    #1470531

    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,
    Ismael

    #1470605

    Thank 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,
    Eduardo

    • This reply was modified 1 week ago by ezimbron.
    • This reply was modified 1 week ago by ezimbron.
    • This reply was modified 1 week ago by ezimbron.
    #1470643

    Hi,

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Center Subheading when text default is justify’ is closed to new replies.