Jump to content

Stacking blog meta data on mobile

Recommended Posts

Site URL: https://www.whoiscooper.com/blog/

I'm trying to force the meta-data fields I have on my blog (categories and date) to stack one on top of the other, for mobile only. Right now, due to the size, the meta data fields are smashed together... I've tried resizing the font instead, but could only get the date to respond.

I'd prefer to stack them anyway. Any help would be greatly appreciated. 

- Matt

Screen Shot 2021-10-25 at 5.05.48 PM.png

Link to comment
2 hours ago, whoiscooper said:

Site URL: https://www.whoiscooper.com/blog/

I'm trying to force the meta-data fields I have on my blog (categories and date) to stack one on top of the other, for mobile only. Right now, due to the size, the meta data fields are smashed together... I've tried resizing the font instead, but could only get the date to respond.

I'd prefer to stack them anyway. Any help would be greatly appreciated. 

- Matt

Screen Shot 2021-10-25 at 5.05.48 PM.png

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	/*change font size of the meta data*/
	.Blog-meta-item.Blog-meta-item--categories > a {
		font-size: 10px;
	}
	/*arrange blog item*/
	.Blog-meta.BlogList-item-meta {
		order: 2;
	}

	.BlogList-item  > a {
		order: 1;
	}

	.BlogList-item-image {
		order: 3;
	}
}

Change the style and the order till it meet to your desire

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi bangank36,

This is great to know, but not what I meant... 

I'm only trying to stack the two meta-data items (categories and date) not the image, title, or body text. The problem is, when on mobile, the meta-data -- categories (highlighted yellow) and the date -- will bunch up if there's too much text. So I'd like to stack them if possible. 

If this isn't possible, just reducing the text size might do it. 

Thanks again for your insight. 

- Matt

Link to comment
On 10/26/2021 at 8:50 AM, whoiscooper said:

Hi bangank36,

This is great to know, but not what I meant... 

I'm only trying to stack the two meta-data items (categories and date) not the image, title, or body text. The problem is, when on mobile, the meta-data -- categories (highlighted yellow) and the date -- will bunch up if there's too much text. So I'd like to stack them if possible. 

If this isn't possible, just reducing the text size might do it. 

Thanks again for your insight. 

- Matt

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.Blog-meta.BlogList-item-meta {
    flex-direction: column;
}
}

 

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

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.