[Support request] H2 title style

Home Forums Support [Support request] H2 title style

Home Forums Support H2 title style

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1599085
    Enrico

    Hi there.
    I’m trying to style H2 title, like the tile “Thank You For Coming To My Website.” in this page.
    I try with the following code, but I’m a beginner and it doesn’t work 🙁

    .capstone-title.capstone-light h2 {
        background: #7E828D;
    }
    
    .capstone-title.capstone-light h2 {
        text-align: center;
        font-size: 2.5em!important;
        margin-top: -101px;
        margin-bottom: 50px !important;
        background: #343D5C;
        width: auto;
        margin-right: auto;
        margin-left: auto;
        padding: 20px;
        font-weight: bold;
        text-transform: capitalize!important;
        position: Relative;
        transform: rotate(-3deg)!important;
        color: white;
    }

    I would like to use it only on a few pages, using Simple CSS plugin.
    Anybody can help me, please?
    Thank you.

    #1599091
    Elvin
    Staff
    Customer Support

    Hi,

    Simple CSS is pretty dated.

    You can uninstall this plugin and use Appearance > Customize > Additional CSS for general CSS if you’d like.

    As for CSS for specific images, you can use the Hook Element.
    https://docs.generatepress.com/article/hooks-element-overview/

    You can wrap your CSS with a <style> </style> tag and place it within the Hook Element’s code area.

    You then set the hook to wp_head and set the Display rule location to the pages you want the CSS to apply.

    #1599149
    Enrico

    Thank you very much Elvin!
    I did, but if you can I need a bit more help…
    I changed a little the code, and I added it:

    <style> h2 {
        text-align: center;
        font-size: 2.5em!important;
        margin-top: -140px;
        margin-bottom: 50px !important;
        background: #0f4c81;
        width: auto;
        margin-right: 30%;
        margin-left: auto;
        padding: 20px;
        font-weight: bold;
        position: Relative;
        transform: rotate(-3deg)!important;
        color: whitesmoke;
    } </style>

    And this is my homepage.
    My question is: is it possible to display the title in the center of the page?
    Thanks

    #1599213
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    h2#titolo-home {
        text-align: center;
        font-size: 2.5em!important;
        margin-top: -140px;
        margin-bottom: 50px !important;
        background: #0f4c81;
        margin-right: auto;
        margin-left: auto;
        max-width: 800px; /* set max width */
        padding: 20px;
        font-weight: bold;
        position: Relative;
        transform: rotate(-3deg)!important;
        color: whitesmoke;
    }
    #1599232
    Enrico

    David, thanks a lot!
    Just to learn, is it any max-width: xxxpx; that works better in both desktop and mobile?
    Thank you again, have a good day!
    Enrico

    #1599296
    David
    Staff
    Customer Support

    No – it just stops the container from going beyond that width, on smaller screen sizes the container will just shrink to fit.

    #1599303
    Enrico

    Thank you David.
    You helped me a lot!

    #1599314
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.