BitBloggist Posted August 1, 2019 Share Posted August 1, 2019 (edited) Hello! I've been bouncing around the past few weeks trying to find the right template, and I've chosen the Rally template for its advanced customization. Everything looks near perfect on my site, but I don't love how the titles on my blog posts are centered, and cut off halfway through a word on mobile. I'd like to either left-align the titles with meta data, so that there's a bit more space, OR, if there's a padding solution for just blog titles, that might work too! My site is https://bitbloggist.com and I've attached mobile preview screenshot to give you an idea of what I'd like to fix. Thanks for your help! Edited August 1, 2019 by BitBloggist Initial Revision Link to comment
Solution tuanphan Posted August 1, 2019 Solution Share Posted August 1, 2019 @BitBloggist Add to Home > Design > Custom CSS @media screen and (max-width:640px) { /* Blog Post Title */ .view-item.collection-type-blog h1.BlogItem-title { text-align: left; font-size: 15px; } /* Post Meta */ .view-item.collection-type-blog .Blog-meta.BlogItem-meta { justify-content: left; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
DanSrokosz Posted December 16, 2021 Share Posted December 16, 2021 (edited) Hi Tuanphan, I'm also looking for help regarding this. I'm happy with how the titles look on the blog list page and blog post pages on desktop but not on mobile. On mobile I'd like the titles on the blog list page to be left-aligned and smaller (left-aligned text, positioned to the left of the page). Currently they're centre-aligned but weirdly not even centred on the page (see screenshot attached). I also need to make the pagination titles much smaller on mobile as currently they're overlapping (see other screenshot attached). My site is https://www.sproutconsulting.co.uk/beanstalk-blog Many thanks, Dan Edited December 16, 2021 by DanSrokosz Link to comment
tuanphan Posted December 19, 2021 Share Posted December 19, 2021 On 12/17/2021 at 6:11 AM, DanSrokosz said: Hi Tuanphan, I'm also looking for help regarding this. I'm happy with how the titles look on the blog list page and blog post pages on desktop but not on mobile. On mobile I'd like the titles on the blog list page to be left-aligned and smaller (left-aligned text, positioned to the left of the page). Currently they're centre-aligned but weirdly not even centred on the page (see screenshot attached). I also need to make the pagination titles much smaller on mobile as currently they're overlapping (see other screenshot attached). My site is https://www.sproutconsulting.co.uk/beanstalk-blog Many thanks, Dan #1. #2. Add to Design > Custom CSS /* Blog page */ @media screen and (max-width:767px) { /* Blog list title on mobile */ h1.blog-title a { text-align: left; font-size: 30px; line-height: 35px; } /* blog pagination */ .item-pagination[data-collection-type^="blog"] .item-pagination-title { font-size: 20px !important; line-height: 30px !important; } } DanSrokosz 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment