Font size on slider

francescomas · February 20, 2018, 6:59pm

Hello,

I’d like the titles in the fixslider to be slightly larger than the ones in the posts, so I entered these codes:

.post-categories a{
    font-family: 'Georgia', sans-serif;
    font-size: 13px;
}
.entry-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: 30px;
}
.read-more a {
    font-family: 'Georgia', sans-serif;
    font-size: 13px;
}
.flex-caption .post-categories a{
    font-family: 'Georgia', sans-serif;
    font-size: 14px;
}
.flex-caption h2.entry-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: 32px;
}
.flex-caption .read-more a{
    font-family: 'Georgia', sans-serif;
    font-size: 14px;
}

I also need text inside fixslider to become smaller on mobile, so I entered the following code:

@media (max-width: 768px){
.flex-caption {
    display: block;
    font-size: 70%;
}
}

However it does not seem to work. Where is my mistake?

laranz · February 21, 2018, 3:06am

Hi,

All looks good only, simply put those in Appearance -> Customize -> Custom CSS or in your child theme’s style.css file, If you’re using any cache try clearing the cache and see that fixes anything.

.flex-caption .post-categories a{
    font-family: 'Georgia', sans-serif;
    font-size: 14px;
}
.flex-caption h2.entry-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: 32px;
}
.flex-caption .read-more a{
    font-family: 'Georgia', sans-serif;
    font-size: 14px;
}

These are enough, no need for the top 3 rules. Both are same. If all fails, pass us the website address to take a look at it.

Let us know,

Thanks,
laranz.

francescomas · February 21, 2018, 10:25am

If I remove the first 3 rules from the custom CSS and keep the other three, I can change the titles within flexslider, but not in the posts.

I also noticed that the “.post-categories to {” code doesn’t work on the font size of the category title, which remains the default one.

Also the problem on mobile persists that titles in the flixslider are not resized as I would like.

My website address is www.timesnewromance.art

colorlibsupport · February 21, 2018, 10:32am

Hey there

I see only coming soon page and cant investigate question,

francescomas · February 21, 2018, 10:50am

Sorry, now it’s visible.

colorlibsupport · February 21, 2018, 1:08pm

Thank you

change titles only in flexslider - use this code:

.flex-caption h2.entry-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: 32px;
}

sorry but not clearly understand this question just tell me what you want to achieve
flex titles on smaller size screen - use this css code:

@media (max-width: 768px){
.flex-caption h2 {
font-size: 22px !important;
}
}

francescomas · February 21, 2018, 2:28pm

Sorry, but my English is not very good. I’ll try to explain myself with images.

In the first image there’s what I want to get.

In the second image you can see how the slider appears on mobile. The titles are still large, although I have used your CSS code.

mikesupport17 · February 21, 2018, 5:59pm

Hello there,

I hope you are doing well today.

The font sizes in the image are the same ones on the page when I checked them.
Please try the following to change the font size:


.post-inner-content .cat-item {
    font-size: 13px;
}

This is the CSS for the mobile font sizes for each area you have highlighted in the image:


@media only screen and (max-width: 800px) {
.flex-caption .post-categories a {
    font-size: 12px;
}
.flex-caption h2.entry-title {
    font-size: 28px;
}
.flex-caption .read-more a {
    font-size: 12px;
}
.post-inner-content .cat-item {
    font-size: 10px;
}

.entry-title {
    font-size: 28px;
}
.read-more a {
    font-size: 10px;
}
}

Best Regards,
Support

francescomas · February 21, 2018, 6:38pm

Yeah, the first code is good for what I needed!

The second one still doesn’t change the size of titles inside the flexslider on mobile.

This is all the code I added, please check if something is wrong:

.entry-content, .entry-summary {
    font-family: 'Times New Roman', sans-serif;
    font-size: 16px;
    text-align: justify;
}
.navbar-brand {
    font-family: 'Times New Roman', sans-serif;
    font-size: 36px;
}
.navbar.navbar-default {
    font-family: 'Times New Roman', sans-serif;
}
.nav-search input[type="text"] {
    font-family: 'Times New Roman', sans-serif;
    font-size: 15px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Georgia', sans-serif;
}
button, input, select, textarea {
    font-family: 'Georgia', sans-serif;
}
.comment-author .fn {
    font-family: 'Georgia', sans-serif;
}
.cat-title a {
    font-family: 'Georgia', sans-serif;
}
article.post .post-categories a, .post-inner-content .cat-item a {
    font-family: 'Georgia', sans-serif;
}
.tagcloud a {
    font-family: 'Georgia', sans-serif;
    font-size: 10px !important;
}
.tagline {
    font-family: 'Georgia', sans-serif;
}
.post-navigation a, .paging-navigation a {
    font-family: 'Georgia', sans-serif;
    font-size: 12px;
}
.comment-reply-link {
    font-family: 'Georgia', sans-serif;
    font-size: 10px;
}
.copyright {
    font-family: 'Georgia', sans-serif;
    font-size: 13px;
}

.post-inner-content .cat-item {
    font-family: 'Georgia', sans-serif;
    font-size: 12px;
}
.entry-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: 26px;
}
.read-more a {
    font-family: 'Georgia', sans-serif;
    font-size: 12px;
}
.flex-caption .post-categories a {
    font-family: 'Georgia', sans-serif;
    font-size: 14px;
}
.flex-caption h2.entry-title {
    font-family: 'Times New Roman', sans-serif;
    font-size: 32px;
}
.flex-caption .read-more a {
    font-family: 'Georgia', sans-serif;
    font-size: 14px;
}

@media (max-width: 768px){
.flex-caption {
    display: block;
}
}
.flex-caption {
    color: #ffffff;
    text-shadow:
    1px 1px 2px black,
    1px -1px 2px black,
    -1px 1px 2px black,
    -1px -1px 2px black;
}
.flex-control-paging li a {
    color: #ffffff;
    box-shadow:
    1px 1px 2px black,
    1px -1px 2px black,
    -1px 1px 2px black,
    -1px -1px 2px black;
}
.flex-caption .post-categories:after {
    box-shadow:
    1px 1px 2px black,
    1px -1px 2px black,
    -1px 1px 2px black,
    -1px -1px 2px black;
}
.flex-caption .read-more a {
    border: 0;
    position: relative;
}
.flex-caption .read-more a {
    border: 0;
    position: relative;
}
.flex-caption .read-more a:after,
.flex-caption .read-more a:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 15px;
    width: 2px;
    background: #ffffff;
    top: 0;
}
.flex-caption .read-more a:after {
    right: 0;
}
.flex-caption .read-more a:before {
    left: 0;    
}
.flex-caption .read-more a:after,
.flex-caption .read-more a:before{
color: #ffffff;
box-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
}
.flex-direction-nav a:before {
    color: #ffffff;
}

div.flexslider {
    max-width: 1060px;
    margin: 0 auto;
}

.entry-meta {
    font-size: 13px !important;
}
.entry-meta .posted-on {
    font-size: 0;
}
.category .page-title {
    display: none;
}
body.single .entry-content a {
    color: #ecce0a;
}
.page a {
 color: #ecce0a;
}
nav.navbar.navbar-default {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
header#masthead {
    margin-top: 65px;
}
.admin-bar nav.navbar.navbar-default {
    top: 32px;
}

@media only screen and (max-width: 800px) {
.flex-caption .post-categories a {
    font-size: 12px;
}
.flex-caption h2.entry-title {
    font-size: 28px;
}
.flex-caption .read-more a {
    font-size: 12px;
}
.post-inner-content .cat-item {
    font-size: 10px;
}

.entry-title {
    font-size: 28px;
}
.read-more a {
    font-size: 10px;
}
}

mikesupport17 · February 21, 2018, 7:24pm

Hello there,

Please try this out:


@media only screen and (max-width: 800px)
.flex-caption h2.entry-title {
    font-size: 17px !important;
}

Best Regards,
Support

francescomas · February 21, 2018, 9:42pm

No, I can’t resolve. Thank you anyway!

movin · February 22, 2018, 1:55am

You are always welcome here