Make List layout Mobile image flush right

Ask the Community Customization
1

Is there a CSS code to make the image to the right side in the Mobile version of List layout?
Sadly the Mobile version of List layout looks like Grid and it takes up a lot of screen space for each event. The date box is in upper left and the image is under that, and then event title under the image. I’d like to make it so Date is upper left, then image to the right of the date, then event title right under the date/image. This would help tighten up the event card in Mobile.

1 Like
3

Hi there, @Erik_Smith :waving_hand:

Here is the code for your case:

@media (max-width: 480px) {
  .eapp-events-calendar-list-item-infoContainer {
    margin-top: -100px;
  }
  .eapp-events-calendar-list-item-imageContainer {
    width: 125px !important;
    height: auto !important;
    margin-right: -20px !important;
    margin-left: auto !important;
    align-self: flex-end;
  }
}

Please try it out and let me know if it helped :slightly_smiling_face:

4

That works great. Thank you Max!

1 Like
5

Perfect, you’re welcome :slightly_smiling_face:

6

I spoke to soon. The preview shows it just fine but the actual view on my iphone in Safari has blown the image completely enormous. So I tried this instead
width: auto !important;
height: 200px !important;
But now the images are still completely out of proprtion and look nothing like what the preview on Elfsight loosk like.

7

I fixed it.

@media (max-width: 480px) {
  .eapp-events-calendar-list-item-infoContainer {
    margin-top: -100px;
  }
  .eapp-events-calendar-list-item-imageContainer {
    width: 200px !important;
    height: 200px !important;
    margin-right: -25px !important;
    margin-left: auto !important;
    align-self: flex-end;
  }
}
3 Likes
8

Great! If anything else comes up, we’ll be delighted to help :slightly_smiling_face: