Make Blog Page show more than one image for mobile

Site URL: https://rolling-pictures.squarespace.com/documentary

Hi,

I would like the Blog pages: 

• Animation
• Documentary
• Feature
• etc

to show more than one image on smaller devices. Currently, the mobile view shows one project/image at a time. See images attached for reference on what it the mobile version looks like. vs the desktop. I wouldn't mind if the mobile shows two images at a time.

Another screenshot showcases the about us gallery images which shows 2 images at a time on mobile, but for some reason it's getting cut off and expanding the page horizontally which is causing a horizontal scroll (which I don't want). How do I fix these issues?

31 minutes ago, Jadec said:

Site URL: https://rolling-pictures.squarespace.com/documentary

Hi,

I would like the Blog pages: 

• Animation
• Documentary
• Feature
• etc

to show more than one image on smaller devices. Currently, the mobile view shows one project/image at a time. See images attached for reference on what it the mobile version looks like. vs the desktop. I wouldn't mind if the mobile shows two images at a time.

Another screenshot showcases the about us gallery images which shows 2 images at a time on mobile, but for some reason it's getting cut off and expanding the page horizontally which is causing a horizontal scroll (which I don't want). How do I fix these issues?

Could you provide your site password?

Hi site password: hello

12 minutes ago, Jadec said:

Hi site password: hello

Add this to design->Custom css

@media screen and (max-width: 768px) {
  .blog-basic-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 16px;
        grid-row-gap: 35px;
        grid-auto-rows: min-content;
    }
  
}

Update for contact 

@media screen and (max-width: 768px) {
  .blog-basic-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 16px;
        grid-row-gap: 35px;
        grid-auto-rows: min-content;
    }
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

I added:

@media screen and (max-width: 768px) {
  .blog-basic-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 16px;
        grid-row-gap: 35px;
        grid-auto-rows: min-content;
    }
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

See screenshots attached: everything still looks the same.

7 minutes ago, Jadec said:

I added:

@media screen and (max-width: 768px) {
  .blog-basic-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 16px;
        grid-row-gap: 35px;
        grid-auto-rows: min-content;
    }
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

 

See screenshots attached: everything still looks the same.

You should clear cache

I saw it on the custom css

Hmm I seemed to have cleared the cache in the Google Chrome browser but...I still see one image at a time. I'm not sure what I'm doing wrong.

16 minutes ago, Jadec said:

Hmm I seemed to have cleared the cache in the Google Chrome browser but...I still see one image at a time. I'm not sure what I'm doing wrong.

What i saw on mobile device, you did it right with the custom css

I just checked it out on my phone and you're right it works!

But now I have a new issue. The "Previous" and the "Next" button are falling at weird spots on the bottom of the page and the word isn't center aligned with the arrow.

Any ideas on why this is happening? I have some code that I used to change the name of these buttons.

Code:

/* Blog Page Next Button */
span.next-label {
    visibility: hidden;
}

span.next-label:after {
    visibility: visible;
    content: "Next";
    font-size: 24px;
}

/* Blog Page Previous Button */
span.prev-label {
    visibility: hidden;
}

span.prev-label:before {
    visibility: visible;
    content: "Previous";
    font-size: 24px;
}

See screenshot:

5 hours ago, Jadec said:

I just checked it out on my phone and you're right it works!

But now I have a new issue. The "Previous" and the "Next" button are falling at weird spots on the bottom of the page and the word isn't center aligned with the arrow.

 

Any ideas on why this is happening? I have some code that I used to change the name of these buttons.

Code:

/* Blog Page Next Button */
span.next-label {
    visibility: hidden;
}

span.next-label:after {
    visibility: visible;
    content: "Next";
    font-size: 24px;
}

/* Blog Page Previous Button */
span.prev-label {
    visibility: hidden;
}

span.prev-label:before {
    visibility: visible;
    content: "Previous";
    font-size: 24px;
}

 

See screenshot:

@media screen and (max-width: 768px) {
	.blog-basic-grid .blog-list-pagination {
	    grid-column-start: 1;
	    grid-column-end: 3;
	}
	  .blog-basic-grid {
	        display: grid;
	        grid-template-columns: repeat(2,minmax(0,1fr));
	        grid-column-gap: 16px;
	        grid-row-gap: 35px;
	        grid-auto-rows: min-content;
	    }
	  .gallery-grid-wrapper {
	    grid-template-columns: repeat(1, 1fr) !important;
	  }
}

I'm looking to customize my weblog posts so some of those elements, like classes, show up in a extraordinary area than the default. Since ".Blog-meta-object–classes" is the detail, is it possible to code this into an HTML block to insert this meta statistics where I would really like?

1 hour ago, yresaw3 said:

I'm looking to customize my weblog posts so some of those elements, like classes, show up in a extraordinary area than the default. Since ".Blog-meta-object–classes" is the detail, is it possible to code this into an HTML block to insert this meta statistics where I would really like?

What is your site url

Hi bangank36 I'm also looking to customize my Smoker blog so some of those elements, show up in a extraordinary area than the default. Since ".Blog-meta-object–classes" is the detail, is it possible to code this into an HTML block to insert this meta statistics where I would really like? Please help me

6 hours ago, JerryAlex said:

Hi bangank36 I'm also looking to customize my Smoker blog so some of those elements, show up in a extraordinary area than the default. Since ".Blog-meta-object–classes" is the detail, is it possible to code this into an HTML block to insert this meta statistics where I would really like? Please help me

Could you share your site url?

On 6/24/2021 at 6:52 PM, elexjohni said:

@bangank36 Hey I am facing same issue here is my website url https://deltaheatedvest.com/, Please Help. Thanks

your site is not from Squarespace