[Resolved] Paragraph styling within GP grid

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

[Leo]

Hi,

It should be something like this:

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

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

[Leo]

Both would work but I would go with classes.

No space between p and class though:

p.center-para {
    text-align: center;
}

[Author]

Posts