SALE! Get up to -50% off on our Grand Spa Theme limited time offer will be ended on 29 June so hurry up!

Okay
  Public Ticket #1207975
Centering H2 for "Portfolio Classic"
Open

Comments

  •  2
    Jordan started the conversation

    Hi there, I've been struggling with custom CSS and getting it to stick for elements built with Content Builder.

    This ticket is specifically about getting my text to stay centered on desktop and iPad view for the "Portfolio Classic" element.

    Here is what I've already tried:

    • Changing the custom CSS in the element itself to "text-align:center;" in the Portfolio Classic.
    • Altering my "styles.css" with the "h2.ppb_title.alignleft" to text-align: center as well as width: 100% (the latter, the "width:100%" for this element seems to do the trick in Chrome & Firefox inspector but is getting over-ridden by this combined.css file stored in my uploads folder)
    • Using Custom CSS in theme setting. This too with the previous mention of width doesn't seem to work.

    The problem is that this "combined.css" element keeps overriding my custom CSS. Or am I just doing it wrong?

  •  1,006
    Dake replied

    Hey Jordan,

    Thank you for purchasing our Grand Portfolio theme

    Please try inserting the below css into your custom css section (theme settings>Script>custom css for desktop):

    .portfolio_desc.portfolio2 h5 {
        text-align: center !important;
    }

    Kind regards,
    Dake

  •  2
    Jordan replied

    Thanks for the quick response Dake. While that centers the h5 header for each portfolio, I'm looking for a way to center the H2 tag above it. Is there a way to do this? I need to modify the "h2.ppb_title.alignleft" CSS attribute so the width is 100% I think. I mean, when I did this in inspector it seemed to do the trick... but I can't for the life of me figure out how to make it stick.

  •  2
  •  1,006
    Dake replied

    Hey Jordan,

    Thank you for keeping me posted

    Please try inserting the below css into your custom css section (theme settings>script>custom css for desktop):

    h2.ppb_title.alignleft {
        width: 100% !important;
    }

    Kind regards,
    Dake

  •  2
    Jordan replied

    You rock Dake, thanks again for your quick responses. I have a question, is the !imported; command mean it supersedes other stylesheets, like this "combined.css"?

  •  1,006
    Dake replied

    Hey Jordan,

    You're welcome

    Yes, "!important" causes any custom css styling to take precedence.

    Kind regards,
    Dake