Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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!

screenshot-2019-08-01-074129.png.33445f4f8ae1313b01648706aa965fc8.png

Edited by BitBloggist
Initial Revision
Link to comment
  • Solution

@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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

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

IMG_0507.PNG

IMG_0508.PNG

Edited by DanSrokosz
Link to comment
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

IMG_0507.PNG

IMG_0508.PNG

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

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.