Jump to content

How to style 7.1 blog layout as Side by Side on mobile

Recommended Posts

In 7.1 you have the option of styling the blog as a grid (thumbnail image stacked on top of title) or side by side (thumbnail image on the left with text adjacent to it). However, when viewed on mobile the blog layout defaults too grid. There is currently no way of customising the mobile view from within the Style section. Attached is an image of the mobile view I'm trying to achieve. Summary blocks allow you to create this layout but I need this layout to apply to the entire blog.

Can anyone please help with the CSS so that the blog displays as grid on deskop but side by side (list view) on mobile?

Screenshot 2020-01-26 at 20.20.35.png

Link to comment
  • Replies 4
  • Created
  • Last Reply
7 hours ago, meganheath said:

Password: squarespace

Thanks for taking a look at this @tuanphan

Do you know CSS basic?

Have you tried Float/Flex yet? Some suggestion..

@media screen and (max-width:640px) {
.blog-basic-grid .blog-basic-grid--container {
    flex-direction: row;
.blog-basic-grid .blog-basic-grid--text {
    margin-left: 10px;
article>div:first-child {
    width: 40%;
.blog-basic-grid .blog-article-spacer {
    display: none;
h1.blog-title {
    font-size: 16px !important;
    text-align: 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


This topic is now archived and is closed to further replies.

  • 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.