Left-align blog titles and meta data for mobile only - Rally template?

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!

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

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;
}
}