-
Posted in : TheBlogger
-
Hi,
Headlines in related posts do not adjust to the area, it means that I can only use short headlines if it must look pretty (on mobile phones)
Can you help?
Screendump from mobile:
Hi,
Could you try to use this custom css code,.related-posts .post-thumbnail .entry-title { font-size: 18px; }Thanks
You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.
Hi!
I used this css code and it works ok, but only on desktop version. On mobile version the problem still exists.
Is there an option to optimize the font size in related posts for all versions?
On mobile sometimes I don’t have even “read more” button because it doesn’t fit in.
You can check out what I mean here i.e: http://stohistorii.pl/nowa-zelandia-wulkany-geotermalne-zrodla/Hi agatasto,
You have a problem with your custom css codes.You added one bracket after your media quary. Media queries codes should be closed by two brackets. Other code should be closed with one bracket.
If any of the codes you write does not work, there should be brackets or punctuation error before the code.Serkan I checked all the brackets and it looks all good. But I don’t have a knowledge about puctation in css, so I can’t trace if there’s anything missing.
If you will have a minute could you check if everything’s fine witm my css codes? I use only those which you paste here in support for The Blogger theme:
@media screen and (max-width: 767px) {
.link-box.ratio-2-1 .post-wrap { padding-top: 34%; }
.link-box:first-child { width: 100%; padding-top: 10px; }
.link-box:nth-child(n+2) { width: 50%; } }@media screen and (min-width: 860px) { .blog-list .hentry-middle { padding: 0 3em; } }
.site-header .social-link { font-size: 18px; }
.blog-grid.first-full .hentry:first-child .hentry-middle { max-width: 860px; padding: 2em 0; }
.blog-grid.first-full article:first-child .entry-title { font-size: 45px; }
.related-posts .post-thumbnail .entry-title { font-size: 18px; }
.blog-list .hentry { border-bottom: 1px solid #ccc; }
I have mainly problems with adjustments in mobile version, what you can see here:
1. Font size in “you may also like” (too big, doesn’t fit): https://s24.postimg.org/w3v3bemqd/mobile_version.png
2. Alignment to the top of the featured image in archives (now it’s in the middle): https://s30.postimg.org/bsbm5q8ep/mobile_version_archives.png
3. Font size in first link box (too big, doesn’t fit):
https://s24.postimg.org/6ull84v45/mobile_version2.pngHi,
1)@media screen and (max-width: 767px) { .related-posts .post-thumbnail .entry-title { font-size: 15px; } }2) It is not possible by default. Actually, it is looking good atm.
3) You can increase the padding top.@media screen and (max-width: 767px) { .link-box.ratio-2-1 .post-wrap { padding-top: 58%; } }Thanks
Hi Serkan
I assume that with CSS code i paste is everything ok.Comming back to the listed problems:
1. It still appears – the font is a bit smaller but still it doesn’t fit. I tried to change a font size in css code (even for 5px) but it didn’t work.
https://s27.postimg.org/h17vxuqpf/mobile1.png2. Hmm, I don’t like the look of it as the row for one post looks really long when it’s squeezed in mobile version + I can’t move it and align to the top of image… but ok, I get it that you can’t fix it. But maybe in updates you could do something what will make an option for this alignment?
3. Works perfectly, thank you:)
You must be logged in and have valid license to reply to this topic.