Font size

Hi,
I think you’ve created a shortcode-based post grid(https://i.imgur.com/7Y3Zkiy.png), not a Gutenberg block-based(https://i.imgur.com/avYrODx.png).

To customize font for a shortcode-based post grid, go to the edit mode of your grid.
Screenshot: https://i.imgur.com/jP4YMFi.png

Then look for the layout that you’re using and go to the edit mode.
Screenshot: https://i.imgur.com/A8ckz4t.png

To customize a specific element like post-title, click on the element, and you can customize the font size there.
Screenshot: https://i.imgur.com/ZdOZgWq.png
The problem is on the shortcode-based post grid is you can’t customize depending on specific screen size. You’ve to write Custom CSS.
Screenshot: https://i.imgur.com/YbJ63tt.png
Code:
@media(max-width: 600px){
.title_link{
font-size: 18px !important;
}
}

let us know if it helps.

Hi Raju – what you are saying makes sense. I entered the CSS code but it made no difference on my phone. I tried it on an iPhone SE – screen width 640 px – so I changed you CSS code to 680 px, but it had no effect. I tried each of the following

@media(max-width: 680 px) {
.title_link{
font-size: 18px !important;
}
}

@media only screen and (max-width: 680px) {
.title_link{
font-size: 18px !important;
}
}

Please try to replace the CSS code with this one.
@media(max-width: 680px) {
.title_link a{
font-size: 18px !important;
}
}

or

@media only screen and (max-width: 680px) {
.title_link a{
font-size: 18px !important;
}
}

If the CSS code is still not working, then try to visit the website with an android.

Let us know the update.
Regards.

Hi Raju – that worked thanks ??

However, on my phone, when the text in any of the Post Grids goes on to the next line, the gap between lines 1 and 2 is about one full line height, if not more – as if there is a lot of padding. I tried changing the line height, with no success (with and without the !~important)

@media(max-width: 680px) {
  .title_link a{
    font-size: 16px !important;
	line-height: 0.6 !important;

  }
}

@media(max-width: 680px) {
  .title_link a{
    font-size: 16px !important;
	line-height: 4px !important;

  }
}

• This reply was modified 1 year, 10 months ago by GarrettB.

Hi @garrettb,
I’m extremely sorry for my late response.
Could you please try to use the flowing code?

@media(max-width: 680px){
.post-grid .item{
line-height: 10px !important;
}
}
Screenshot: https://i.imgur.com/kSP12Zm.png

Let us know the update, and don’t hesitate to ask if you need any help.
Regards.

• This reply was modified 1 year, 10 months ago by azizulraju.

Hi Raju

Please don’t apologize – for you are spending your time helping me – and that most recent suggestion of yours worked perfectly

Thank you ??

Garrett

Glad to know that it fixes the issue for you.
Would you mind writing a review for us? It’ll inspire us a lot.

You can post your review and rating here:
https://www.ads-software.com/support/plugin/post-grid/reviews

Thank you so much.

Hi Raju

I added a review – however when I clicked on the link and filled out the review etc., it said I submitted a review for the Breadcrumb plugin – so I am confused ??

Ops, I did a mistake.here is the URL https://www.ads-software.com/plugins/post-grid/#reviews