Responsive text on project posts headline and paragraph

Hi,

We just purchased Sydney Pro for our website and installed the Sydney Pro child theme. The move from Sydney to Sydney Pro was good however we’d like to customize the responsiveness of the headline font and paragraph font on our project posts.

Not sure how your support works for Sydney Pro but I don’t want to put our licence up on this forum lest it get taken but you can check our account under studio@varipix.com since it wasn’t purchased under my user name,

An example of our project posts is here http://www.varipix.com/content/projects/volkswagen-2016-1-4l-engine/

We are using the Sydney: Video widget to place the video and title. We’d like the video title to be smaller on the website and smaller on mobile.

Also the paragraph under the video is in a SiteOrigin Editor Widget. We’d like this text to be more responsive/smaller on mobile as well.

The post link above is just an example but we don’t want to make these adjustment on this page only. We’d like it to be site wide.

Thank you for your help.
Ian

Hello Ian,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

.widget .widget-title {
    font-size: 24px;
}

.siteorigin-widget-tinymce.textwidget {
    font-size: 16px;
}

Kind Regards, Roman.

Thank you so much Roman. This was extremely helpful.

I’m slowly starting to wrap my head around CSS. We did want the font size to be responsive so I’ve modified the code you provided to this:

@media only screen and (max-width: 767px) {

    .widget .widget-title {
        font-size: 24px;
    }

    .siteorigin-widget-tinymce.textwidget {
        font-size: 16px;
    }
}

@media only screen and (max-width: 500px) {

    .widget .widget-title {
        font-size: 18px;
    }

    .siteorigin-widget-tinymce.textwidget {
        font-size: 12px;
    }
}

It seems to be working now very well on tablets and phones, but if you see any problem with how I modified the code please let me know if there is a better way to write it.

Thank you again for your help.
Cheers
Ian

You are welcome Ian!

Your code looks well, I just formatted it accordingly to WordPress CSS coding standards:

Kind Regards, Roman.