Display less than 3 blog posts on a "blog posts" section for mobile

[Explore-Sherpa]

I only want to display one new blog in the "blog posts" section on my home page, but only on the mobile version of my website.

Website Link: https://www.exploresherpa.com/

I am using an influence theme.

[BSS-TekLabs · Accepted solution]

Hi @Explore-Sherpa,

You can follow these steps to display only one new blog in the "blog posts" section on your home page

1. Open Online Store > Theme > Edit Code

2. Search for base.css, custom.css, theme.css, or styles.css

3. Paste the code snippet below to the bottom of the file and hit save (You can change the breakpoint to your need instead of 767px)

/* Default styles for all screen sizes */
#shopify-section-template--21827397878039__flotilla_blog_posts_6MFbU9 div.grid.gap-4.md\:gap-1.md\:grid-cols-3 {
    display: block;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 767px) {
    /* Hide the last two elements inside the grid */
    #shopify-section-template--21827397878039__flotilla_blog_posts_6MFbU9 div.grid.gap-4.md\:gap-1.md\:grid-cols-3 > *:nth-last-child(-n+2) {
        display: none;
    }
}

Here is the result on the mobile

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[BSS-TekLabs · Accepted solution]

Hi @Explore-Sherpa,

You can follow these steps to display only one new blog in the "blog posts" section on your home page

1. Open Online Store > Theme > Edit Code

2. Search for base.css, custom.css, theme.css, or styles.css

3. Paste the code snippet below to the bottom of the file and hit save (You can change the breakpoint to your need instead of 767px)

/* Default styles for all screen sizes */
#shopify-section-template--21827397878039__flotilla_blog_posts_6MFbU9 div.grid.gap-4.md\:gap-1.md\:grid-cols-3 {
    display: block;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 767px) {
    /* Hide the last two elements inside the grid */
    #shopify-section-template--21827397878039__flotilla_blog_posts_6MFbU9 div.grid.gap-4.md\:gap-1.md\:grid-cols-3 > *:nth-last-child(-n+2) {
        display: none;
    }
}

Here is the result on the mobile

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[BSS-TekLabs · Accepted solution]

- Here is the solution for you

- Please follow these steps:

- Then find the theme.css file.

- Then add the following code at the end of the file and press 'Save' to save it.

@media only screen and (max-width: 600px) {
 #shopify-section-template--21827397878039__flotilla_blog_posts_6MFbU9 .grid [loadin-animation-elm]:not(:first-child) {
 display: none !important;
}
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.