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

Solved

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

Explore-Sherpa
Excursionist
28 0 8

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.

Accepted Solutions (2)

BSS-TekLabs
Shopify Partner
614 174 205

This is an 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

BSSTekLabs_0-1718899313545.png

 


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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
614 174 205

This is an accepted solution.

- Here is the solution for you

- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1718898644383.png

 

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

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSS-TekLabs
Shopify Partner
614 174 205

This is an 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

BSSTekLabs_0-1718899313545.png

 


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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSS-TekLabs
Shopify Partner
614 174 205

This is an accepted solution.

- Here is the solution for you

- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1718898644383.png

 

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

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency