Service Type A Font Sizes - Headings and Paragraphs

Hello,
In Sydney FP: Services Type A, how do you change each heading font size and also the text below the heading? When I change it, it seems to change both the heading and paragraph together, but I would like to control them independently.
Note, the service title is ok, it is just the headings and paragraphs.
Thanks

Hello there,

You can manage it with this CSS code:


.widget_sydney_services_type_a .content > h3 {
  font-size: 30px;
}

.widget_sydney_services_type_a .content p {
  font-size: 16px;
}

To apply it to your site, add it to Appearance > Customize > Additional CSS from your site dashboard.

Regards,
Kharis

Hi Kharis

Thanks for your reply.

When I try this, the first bit of code changes both the service heading and paragraph to the specified font size. The second bit of code doesn’t seem to do anything.

Is there a way to change the heading and paragraph independently?

Thanks

Hello there,

Please share your site URL, so I can be more precise.

Regards,
Kharis

Hey,

My site isn’t live yet so I can’t (I don’t think). Still learning.

Thanks

Do you have other extra CSS code applied?

To avoid confusion, please checkout our demo site. Do you want to enlarge the “Our Services” heading?

Regards,
Kharis

No, the “Our Services” heading is fine. It is the “Photography, Strategy, Design” headings and then the 3 paragraphs below each one. The first code you gave me did actually change these font sizes, but it did both of them together. I would like to control them independently so that I can make the 3 headings slightly bigger than the 3 paragraphs.
I have other custom css so not sure if there is something in there that is affecting it.
I can paste it in here if that helps?

Thanks a lot.

Yes, please paste it here to let me inspect if there’s trouble in it.

Regards,
Kharis

Ok, this is in Custom CSS:

.fa-star:before{
content: ‘’; /* Remove default icon */
display: block;
width: 64px;
height: 64px;
background-image: url(‘http://localhost/website1/wp-content/uploads/2017/07/097778-black-inlay-crystal-clear-bubble-icon-social-media-logos-facebook-logo.png’);
background-size: contain;
background-position: center center;
margin-top: 17px;
}

.roll-icon-box .icon{
border: none;
}

.page-id-7 .header-image{
background-image: url(‘http://localhost/website1/wp-content/uploads/2017/07/AdobeStock_91844402_mini-e1499150782246.jpeg’);
}

.page-id-9 .header-image{
background-image: url(‘http://localhost/website1/wp-content/uploads/2017/07/Webp.net-resizeimage-6.jpg’);
}

.text-slider .maintitle{
font-size: 85px !important;
letter-spacing:20px !important;

}

.text-slider .subtitle{
font-size: 25px !important;
}

a.roll-button.button-slider {
background-color: Transparent;
border: 2px solid #ffffff;
color: #ffffff;
}

a.roll-button.button-slider:hover {
background-color: #d65050;
border: 2px solid #d65050;
color: #ffffff;

}

div#slideshow p.subtitle {
font-family: font-family: “Century Gothic”, CenturyGothic, AppleGothic, sans-serif;
font-weight:400;
letter-spacing:3px !important
}

.widget_text p {
font-family: font-family: ‘Roboto’, sans-serif;
font-weight:500;
font-size: 30px;
}

div.widget_sydney_testimonials div.customer div.name {
color: white !important;
}

.roll-testimonials .avatar {

	border: 0 !important;
}

.roll-testimonials .avatar, .roll-testimonials .avatar img {
border-radius: 0px;
}
.roll-list li:before {
content: ‘:heavy_check_mark:’;
}
.site-footer {
font-size: 14px;
}
.text-slider .maintitle{
padding-top: 0;
padding-bottom: 0;
}

.text-slider .maintitle{
padding-top: 0;
padding-bottom: 0;
}

.text-slider .subtitle{
padding-top: 0;
padding-bottom: 50;
}
.home .slide-inner {
top:55%;
}
.widget_list li {
font-size: 70px;
line-height: 150px;
}
ul.roll-list {

padding-top: 32px;

}
/* Normal state */
.roll-button.border{
background-color: #d65050;
border-color: #d65050;
color: #fff;
}

/* On hover state */
.roll-button.border:hover{
background-color: transparent;
color: #d65050;
}


And in additional CSS:
.slide-inner .text-slider .maintitle::after {
display: none;
}

@media only screen and (min-width:992px){

.widget_sydney_services_type_a .content {
padding-left: 20px;
padding-right: 20px;
}

}

.footer-widgets {
padding: 0px 0;
}

Hello there,

Thank you for sharing.

What will happen if you move the code I suggested to the most first line right before this?


.fa-star:before

Regards,
Kharis

Hi Kharis

Hmm no luck, I pasted the code at the top but it still seems to change both the headings and paragraphs together…

Thanks

Hello there,

Try to add this code and adjust the value:


.widget_sydney_services_type_a .content > h3 {
  font-size: 30px;
}

Save. Then reload your page and see the changes in there.

Then add this code and change the value.


.widget_sydney_services_type_a .content p {
  font-size: 16px;
}

Regards,
Kharis

Hi,

I pasted in the first code, changed the size, saved and verified that I could see the changes after refreshing site. (which changed headers and paragraphs together)

Then, I pasted in the second code, changed the value, but still nothing happens.

Hello there,

Please share the text of one of your services here. Does it contain a h3 tag wrapper?

Regards,
Kharis

Hmm not entirely sure how do I check that?

But I did right click and choose inspect on both the service heading and paragraph and they both seem to start with h3 style.

Heading - <h3 style=“color: rgb(68,63,63);”>Group Coaching</h3>
Paragraph - <h3 style=“color: rgb(68,63,63);”>Come and enjoy our group coaching sessions.</h3>

Is this what you mean?

Thanks

Hello there,

Yes, thank you for sharing.

Please try this code:


.widget_sydney_services_type_a .content > h3:first-child {
  font-size: 30px;
}

.widget_sydney_services_type_a .content > h3 {
  font-size: 18px;
}


Regards,
Kharis

Yay that worked! I’m not sure why but it did haha.

Thanks a lot.

Much appreciated.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis