How can I reduce the gap in 'view all' and display blogs in grid format on mobile?

[jasonthegrammy]

Hi guys, I would like to ask if anyone could help me with the huge gap between this can be reduce?

also, is there any chance I could have blog to be like a grid (like desktop view) instead of showing 1 blog at a time? (for mobile users)

website : sundaysfit.com

Question 1 :

Question 2 (mobile view) :

instead of like below (desktop view):

[Moeed]

Hey @jasonthegrammy

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @jasonthegrammy

Answer 1: Please go to your Online store > Theme > Customize, add this code below to Custom CSS of that section

.hr--invisible { margin: 20px 0 !important; }

\

Answer 2: It can be but it will appear ugly like this image below. Please add this code to Custom CSS of that section

@media only screen and (max-width: 749px){
.grid__item {
    width: 33.3333% !important
}
}

[topnewyork]

@jasonthegrammy

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above tag

hr {
     margin: 0px;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.