Stacking blog meta data on mobile

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

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

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

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

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