blog posts page separation between entries on mobile - Support

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 4, 2021 at 10:31 am #1323410
rob2701
Participant
Hi,

I am struggling to get the blog posts on the blog posts page to have consistent separation between them on mobile, where it becomes a 1 column layout (below 767px). Desktop and tablet sizes work just fine, it’s just the mobile 1 column layout.

Between the first and second entry the separation is fine.
Between the second and third entry the separation is too small or absent.
Between the third and fourth entry the separation is too big (almost double).
Etc.

I have tried adapting the .slide-entry-except but that doesn’t yield consistent results.

In my Quick CSS I currently have (line 223):
```
/* blog post on smaller screens 1 column */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .slide-entry {
    width: 100%;
    margin-left: 0;
  }
  .responsive #top #wrap_all .slide-entry-excerpt {
    padding-bottom: 20px !important; 
  }
}
```
Can you help me out here? Thanks! (login in private)
Rob
- This topic was modified 3 years, 2 months ago by rob2701.
October 4, 2021 at 3:50 pm #1323483
Yigit
Keymaster
Hey Rob,

I adjusted your code and changed it from
```
/* blog post on smaller screens 1 column */
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .slide-entry {
  width: 100%;
  margin-left: 0;
/* margin-bottom: 30px !important; */
  }
  .responsive #top #wrap_all .slide-entry-excerpt {
    padding-bottom: 20px !important; 
  }
}
```
to following
```
/* blog post on smaller screens 1 column */
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .slide-entry {
  width: 100%;
  margin-left: 0;
/* margin-bottom: 30px !important; */
  }
  .avia-content-slider .slide-entry-wrap:not(:last-child) {
    margin-bottom: 0;
  }
  .slide-entry-wrap .slide-entry:nth-child(3) {
    padding-top: 20px;
  }
  .responsive #top #wrap_all .slide-entry-excerpt {
    padding-bottom: 20px !important; 
  }
}
```
Please review your website :)

Best regards,
Yigit
October 4, 2021 at 4:00 pm #1323490

rob2701
Participant

Hi Yigit,

Thank you very much for the quick fix, that looks perfect now. You’re a star.

Have a good day!
Rob

October 4, 2021 at 4:05 pm #1323492

Yigit
Keymaster

Hi,

You are welcome, Rob! :)

For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

Enjoy the rest of your day!

Best regards,
Yigit
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘blog posts page separation between entries on mobile’ is closed to new replies.