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, 11 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, 11 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://wordpress.org/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 🙂
