Others mobile optimization

Hey cuccarini,

Thank you for the inquiry.

1.) This is possible but you have to display 4 items for each row on desktop view, then use this css code to adjust the width of the items on smaller screens.

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #main .avia-content-slider .slide-entry-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}

Again, you have to display the items in 4 columns instead of 3 in order for this modification to work correctly.

2.) This is possible but it will require modification that is beyond the scope of support. You may need to edit the single.php or the includes > loop-index.php template in order to achieve the same layout shown in your screenshot. For starters, you can use this css code to split the featured image and the content into separate columns.

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #main .avia-content-slider .slide-entry {
    width: 100% !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .responsive #top #wrap_all #main .avia-content-slider .slide-entry .slide-content {
    flex-grow: 1;
    width: 60%;
    flex-shrink: 0;
    margin-left: 4%;
  }

  h3.slide-entry-title.entry-title {
    text-align: left;
    font-size: 20px !important;
  }
}

Best regards,
Ismael