Two issues after Update 1.80

Hello,

Update 1.80 has introduced nice features for blog pages, and specifically I do love the “Related Posts” function. However, the update has caused a few issues and I need you help.

  1. Blog title: font size is too big.

I tried the css code below, but it did not work. I cannot change the font size by Custom > Fonts > Single Post Title Size, either.

    .post .entry-title {
        font-size: 10px;
    }
  1. The Related Posts

I want to change the font type, font size, and color of titles of the related posts.
Also, I would like to have more space between the title of a post and a featured image of the following post when they are listed vertically on a smaller screen.

Thank you for your support in advance,

Hi,

Thank you for contacting us. I am happy to help with your queries.

1

Try this CSS code:

    .posts-layout .entry-title {
      font-size: 10px;
    }

2

Try this CSS code:

    .sydney-related-posts .entry-title {
      font-family: Georgia, serif;
      font-size: 10px;
    }

    .sydney-related-posts .entry-title a {
      color: #000;
    }

    .sydney-related-posts .entry-title a:hover,
    .sydney-related-posts .entry-title a:active {
      color: #fff000;
    }

Hope that helps.

Regards,
Kharis
aThemes Support

Hi Kharis,

I appreciate your prompt reply with the codes.

  1. Unfortunately, the code below did not work.

.posts-layout .entry-title {
font-size: 10px;
}

Could you provide me with another one?

  1. The second code you gave me worked perfectly to adjust font style, size and color of titles of the related posts.

Could you also help me to adjust space between the related posts when they are listed vertically on a smaller screen such as mobile phones?

a) less space between the featured image and the posted/modified dates
b) more space between the related posts (it means that more space between the title of the 1st related post and the featured image of the 2nd related post).

I hope my request is clear this time.

Thank you again,

Hi Kharis,

In case you would need to have a look, here is the link to my website:

https://www.temporary-url.com/F0B4

Kind regards,

Hello Kharis,

FYI, I tried the code below and it made the title of blog pages bold! However, when I replaced “font-weight:900” with “font-size: 15px”, it did not work. Am I doing something wrong?

Thank you for your support in advance and look forward to hearing from you.
Regards,

.single-post h1.entry-title {
font-weight:900;
}

Hi,

I am sorry for the delay. Let’s address them one by one.

Perhaps I didn’t get the exact location needing help with.

Can you provide me a screenshot with some annotations showing the location?

Regards,
Kharis
aThemes Support

Hi Kharis,

No problem.
Thank you for your hard work.

I am not sure what you meant by annotations, so I made a guess and here we go.

I hope this is what you need to help me.
If not, can you please explain what I should provide you with.

Regards,

Hi Kharis,

Here is the screenshot:

Regards,

Hi,

Thank you for getting back along with the screenshot.

Try this CSS code:

    @media only screen and (min-width: 992px) {
      .single .entry-header .entry-title {
        font-size: 10px;
      }  
    }

    @media only screen and (min-width: 576px) and (max-width: 991px) {
      .single .entry-header .entry-title {
          font-size: 10px;
      }  
    }

    @media only screen and (max-width: 575px) {
      .single .entry-header .entry-title {
        font-size: 10px;
      }  
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you for getting me back with the code.

Unfortunately, the code you gave me worked only for the smallest screen (iPhone).
It does not change the font size on iPad and a laptop.

I then changed numbers for “width”.
The adjusted code has changed the font size of iPhone and iPad.
Still, the code does not work on the font size on a laptop screen.

The code currently applied is as below:

@media only screen and (min-width: 1200px) {
.single .entry-header .entry-title {
font-size: 10px;
}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .single .entry-header .entry-title {
      font-size: 24px;
  }  
}

@media only screen and (max-width: 767px) {
  .single .entry-header .entry-title {
    font-size: 22px;
  }  
}

I would appreciate your additional support here.
Kind regards,

Hi,

Try this CSS code:

    @media only screen and (min-width: 1200px) {
     .single .entry-header .entry-title {
       font-size: 10px !important;
     }  
    }

    @media only screen and (min-width: 768px) and (max-width: 1199px) {
     .single .entry-header .entry-title {
         font-size: 24px !important;
     }  
    }

    @media only screen and (max-width: 767px) {
     .single .entry-header .entry-title {
       font-size: 22px !important;
     }  
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

I am afraid that the code does not make any difference:
iPhone: it works.
iPad: it works.
Laptop: it does not work.

Can you please give me another code to try?

Also, can you delete the screenshot above, please?

Kind regards,

Perhaps you got a caching issue on your desktop web browser. Try clearing cache/history and restart it please. Let me know whether it makes any different or not.

Regards,
Kharis
aThemes Support

Hi Kharis,

I did it in vain.
I also checked it, just in case, using somebody else’s desktop.
The code still does not work on desktop screens.

Kind regards,

Hi Kharis,

Thank you for your hard work.
I am waiting for your response…

Kind regards,