Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Paragraph styling within GP grid

Home Forums Support Paragraph styling within GP grid

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #376332
    Max

    Hey

    I have styled a three column page. The middle column contains a separator line that rotates from vertical in big screen to horizontal in mobile view via css.

    The page looks perfect and functions as expected when sizing the browser up or down.

    However I have used inline styling for the paragraphs on this page.

    I now want move the paragraph styling to the css sheet but have had no success using paragraph classes.

    I tried using:

    HTML
    <p class=”new-style”>my text</p>

    CSS
    p.new-style {
    /* insert style */
    }

    But that does not work (even using !important).

    The code from my page is as follows:

    <p style="font-size: 30px; text-align: center; margin-bottom: 20px; margin-top: 20px;">Let's get started</p>
    <p style="font-size: 20px; text-align: center; margin-bottom: 30px;">What do you need?</p>
    
    <div class="grid-container">
    <div class="grid-40">
    
    <img class="aligncenter wp-image-192 size-full" src="https://website.com/wp-content/uploads/2017/08/-Quote-Icon.png" alt="Quote-Icon-96-96" width="96" height="96" />
    <h3 style="font-size: 20px; text-align: center; margin-top: 0px;">I need a quote</h3>
    <p style="text-align: center;">Get our price to complete a task or project.</p>
    <p style="text-align: center;"><a class="button" style="width: 160px;" href="/website/get-quote/">Get a Quote</a></p>
    </div>
    <div class="grid-20">
    
    <img class="aligncenter wp-image-194 vertical size-full" src="https://website.com/wp-content/uploads/2017/08/vertical-45x300.png" alt="Vertical-Line-300-45" width="45" height="300" />
    
    <img class="aligncenter wp-image-195 horizontal size-full" src="https://website.com/wp-content/uploads/2017/08/horizontal.png" alt="Horizontal-Line-296-96" width="296" height="96" />
    
    </div>
    <div class="grid-40">
    
    <img class="aligncenter wp-image-193 size-full" src="https://website.com/wp-content/uploads/2017/08/Support-Icon.png" alt="Support-Icon-96-96" width="96" height="96" />
    <h3 style="font-size: 20px; text-align: center; margin-top: 0px;">I need support</h3>
    <p style="text-align: center;">Get us to help with your current workload.</p>
    <p style="text-align: center;"><a class="button" style="width: 160px;"  href="/website/get-support/">Get Support</a></p>
    </div>
    </div>

    Please let me know how to set up the paragraph classes in the css sheet.

    Thanks in advance for your assistance.

    GeneratePress 1.4
    GP Premium 1.4.3
    #376380
    Leo
    Staff
    Customer Support

    Hi,

    It should be something like this:

    .grid-40 p {
        font-size: 20px;
        text-align: center;
    }
    #376498
    Max

    So do I use a Class or an Id?

    Which is correct:

    HTML
    <p class=”center-para”>Get us to help with your current workload.</p>

    CSS
    .grid-40 p .center-para {
    text-align: center;
    }

    OR

    HTML
    <p id=”center-para”>Get us to help with your current workload.</p>

    CSS
    .grid-40 p #center-para {
    text-align: center;
    }

    Thanks in advance for your kind assistance.

    #376526
    Leo
    Staff
    Customer Support

    Both would work but I would go with classes.

    No space between p and class though:

    p.center-para {
        text-align: center;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.