Mobile Version: 2 blog posts in a row

Site URL: https://caper-badger-3s6d.squarespace.com/blog/lyrics

https://caper-badger-3s6d.squarespace.com/blog/behindmylyrics

https://caper-badger-3s6d.squarespace.com/blog/mytruth

Password: home

The blog posts (on these three category pages) get stacked on mobile version. I want 2 blog posts in a row. Can anyone help?

Add to Blog Page Header

<style>
  @media screen and (max-width:767px) {
  .tweak-blog-basic-grid-width-inset .blog-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
  }
</style>

@tuanphan Thank you!

Hi @tuanphan!  I am also trying to display my blog posts on two rows on mobile. I tried your code on my site (https://www.nimpairings.com/) but it is not working. I installed the Lazy Summaries Plugin from Squarewebsites, maybe it is interfering with this code? Could you help? Thanks a lot for all your valuable help! 

Ninon

On 10/7/2022 at 2:12 PM, NinonM said:

Hi @tuanphan!  I am also trying to display my blog posts on two rows on mobile. I tried your code on my site (https://www.nimpairings.com/) but it is not working. I installed the Lazy Summaries Plugin from Squarewebsites, maybe it is interfering with this code? Could you help? Thanks a lot for all your valuable help! 

Ninon

The code for blog page, Lazy Plugin uses Summary Block, so need a different code

Do this for all posts on homepage?

Ideally, I need this for all the summary blocks on my site (there are 10 pages with summary blocks). Is it possible? Thank you so much! 

On 10/9/2022 at 2:44 PM, NinonM said:

Ideally, I need this for all the summary blocks on my site (there are 10 pages with summary blocks). Is it possible? Thank you so much! 

It looks like you are using Wall Layout, can you change to Grid? Grid will need less code than Wall

If not, no worry, we will check & give the code.

Hi @tuanphan. I double checked and all my summary blocks are already using the Grid Layout 🙂 (I just customized it with some code to look like this). So, it should be good to go with the code for Grid Layout! 

On 10/12/2022 at 4:04 PM, NinonM said:

Hi @tuanphan. I double checked and all my summary blocks are already using the Grid Layout 🙂 (I just customized it with some code to look like this). So, it should be good to go with the code for Grid Layout! 

It looks complex, can you send all current code in Custom CSS? I think need to adjust some code there before checking new code

@tuanphan, sure! Here it is : 

/*Fix for Blog Banner Code*/
.wm-banner-style-1:not(.sqs-edit-mode-active),
.wm-banner-style-2:not(.sqs-edit-mode-active){
  .page-section.has-banner .section-border{
    position: relative;
    top: 0;
    width: 100%;
    display: flex;
  }
}

body:not(.sqs-layout-editing) .wm-blog-banner{
  min-height:100vh !important; /*Adjust this value to your liking*/
}

.wm-blog-banner .section-background-overlay {
  opacity: .1 !important;
}

.summary-block-setting-design-autogrid .summary-item-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px 25px;

  .summary-item{
    margin: 0 !important;
    width: auto !important;

 
  }
  .summary-content{
    display:flex;
    padding-top: 17px;
    padding-bottom:8px;
  }

  .summary-title{
    flex-grow: 1;
    font-weight:100;
    text-transform:uppercase;
    transition: opacity .5s ease;
  }
  .summary-metadata-container{
    flex-basis: 18ch;
    flex-shrink:0;
    text-align:right;

    * {
      font-weight:100;
      text-transform:uppercase;
      color:black;
      opacity: 1;
    }
  }

  .summary-thumbnail-outer-container{
    a{
      margin-bottom:0px !important;
    }
    img{
      filter: grayscale(0%);
      transition: filter .5s ease,
        transform 1.5s ease;
      will-change: transform;
    }
  }

  /*Hover Effects*/
  .summary-item:hover {
    img{
      filter: grayscale(0%);
      transform: scale(1.05);
    }
    .summary-title{
      opacity: ;
    }
  }

  /*Mobile Styles*/
  @media(max-width:599px) {
    grid-template-columns: 1fr;
    gap: 51px;

    .summary-thumbnail-outer-container{
      width:100vw;
      left:50%;
      margin-left:-50vw;
    }
  }
}

span.next-label {
    visibility: hidden;
}
span.next-label:after {
    visibility: visible;
    content: "More";
    font-size: 30px;
}

span.prev-label {
    visibility: hidden;
}
span.prev-label:after {
    visibility: visible;
    content: "More";
    font-size: 0px;
}

/* Icons to right */
.header-display-desktop {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.header-actions.header-actions--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.header-actions-action.header-actions-action--social>a:not(:first-child) {
    margin-left: -1.5vw !important;
}

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
   margin: 1.5vw 0 0;
}

.header-search-bar{
  margin: 0 0 0 2.5vw;
}
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){
  .header-search-bar{
    display:none;
    margin: 0 0 0 0vw;
  }
}

/**
* Search Icon in Header Styles
* From Will-Myers.com
**/
//Search Page Styles
.sqs-search-page.sqs-search-page-content::before {
  content: "Search";
  display: inline-block;
  margin-bottom: 34px;
  font-size: ~"calc((3 - 1) * 1.2vh + 1rem)";
}

.search-icon * {
  stroke: white;
  stroke-width: 4px;
}

// Desktop Search Icon
.showOnDesktop {
  display: flex;
  align-items: center;
}

.blog-meta-item--tags {
  display: none;
}
// Mobile Search Icon
[data-folder="root"] .search-icon .icon {
  width: 28px;
  height: 28px;
}

@media (max-width: 767px) {
.search-icon * {
stroke: black;
stroke-width: 4px;
}
}

/* Colour of Hamburger Button */
.burger-inner > div {
  background-color: white !important;
}

/* Plugin Sidebar - Custom Styles */
html .sidebar {
  width: 380px;
}
/* end Plugin Sidebar - Custom Styles */

#block-62d555c0a034e7b691f462a4 {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }
#block-62d5567fe2436e5b6229f4a4 {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }

#block-62d55683fb3dc4f51fa06aee {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }

#block-62d55688c9ab99135c61ac4e {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }

#block-62d5568ef54e5d36bda847e7 {

  background-color: rgba( 0, 0, 0, 0.5 );
  padding : 15px;
  text-align: center;
  
  }
/* Load more button */
.loadMoreButton {
    background-color: black;
    color: white;
   margin-top: 4px;
  border-width: 2px;
  padding: 7px 13px;
  max-width: 145px;
}
.sqs-block-summary-v2 .loadMoreButton:after {
    display: none !important;
}
.list-item-content__button-wrapper {
  display: none;
}

Hello @tuanphan, after seeing the CSS code, do you think it is possible to make it? Thanks a lot for your insight. 

On 10/27/2022 at 6:24 PM, NinonM said:

Hello @tuanphan, after seeing the CSS code, do you think it is possible to make it? Thanks a lot for your insight. 

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-62d55693b174fc3b0cce96dd {
#block-62d55693470a593c0566f63f .sqs-gallery-design-autogrid-slide {
    width: calc(~"50% - 20px") !important;
    float: left !important;
    clear: none !important;
}
#block-62d55693470a593c0566f63f .sqs-gallery {
    display: block !important;
    grid: unset !important;
    gap: unset !important;
}
.summary-block-setting-design-autogrid .summary-item-list .summary-thumbnail-outer-container {
    width: 100% !important;
    left: unset !important;
    margin-left: unset !important;
}
.summary-block-setting-design-autogrid .summary-item-list .summary-thumbnail-outer-container img {
    position: static !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
}
#block-62d55693470a593c0566f63f .img-wrapper {
    padding-bottom: 30% !important;
}
.summary-block-setting-design-autogrid .summary-item-list .summary-content {
    flex-direction: column !important;
    justify-content: flex-start !important;
}
#block-62d55693470a593c0566f63f .sqs-gallery-design-autogrid-slide:nth-child(2n+1) {
    margin-right: 20px !important;
}}}