Reducing Font Size in part of a Post

conniedek · Member · Mar 26, 2014 at 9:49 pm
Copy link

Add topic to favorites
I want to reduce the font size by probably 3 pts for the last 2 paragraphs on this page (the paragraph before and after the Buy Now buttons): http://amazinghealtheffortlessly.com/classes-2/
From what I’ve read in the forum it seems I can do this with CSS, but haven’t figured out how to apply it in this situation. Can someone help me? I’ve never worked with CSS before. Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 27, 2014 at 3:00 pm
Copy link
Hi there, this would be my suggestion: put the left button and text wrapped in a div and the same for the right button and text. Here is the basics as a start for you. Enter this in the Text tab and then edit and add your text and button codes.
```
<div class="button-left"><p>Left text here<br />Left button code here</p></div>
<div class="button-right"><p>Left text here<br />Left button code here</p></div>
<p style="font-size: 80%;">Bottom text here</p>
```
Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
```
@media screen and (min-width: 600px) {
.button-left {
float: left;
width: 45%;
}
.button-right {
float: right;
width: 45%;
}
}

@media screen and (max-width: 599px) {
.button-left {
width: 100%;
}
.button-right {
float: left;
width: 100%;
}
```
I’ve used some media queries and at 599px and narrower the buttons and text will go full width since at that point things the two side-by-side are getting pretty narrow. At 600px and wider, the buttons and text are side-by-side.
conniedek · Member · Mar 28, 2014 at 4:12 am
Copy link
Wow, this is a big help. Thank you. Being completely new to this and after quite some trial and error I’ve been able to get it looking like I want except for one small thing: the first 3 words of the bottom text: “We accept Visa,” creeps up between the two divided columns of right text & left text. Any suggestions here? I haven’t published it with these changes because of this issue.
Thanks again!
designsimply · Member · Apr 1, 2014 at 12:18 am
Copy link
Try using “clear” for the last paragraph. Here is thesacredpath’s example:

<p style="font-size: 80%;">Bottom text here</p>

You would want to add “clear: both;” right after “font-size: 80%;” like this:

<p style="font-size: 80%; clear: both;">Bottom text here</p>
conniedek · Member · Apr 2, 2014 at 12:34 am
Copy link
And another “Wow”. That did the trick. This is like magic to me. Thank you so much for your help.
designsimply · Member · Apr 2, 2014 at 9:04 pm
Copy link
It is like magic! :) I like thinking of CSS like that.

No items found.