Custom position of image in Grid layout

Ask the Community Customization
1

I asked ChatGPT and I got this that works great. My only issue is I cannot get my image to be flush right so its not blocked by the date in the upper left corner. Does anyone have any fixes for this?

.eapp-events-calendar-list-item-imageContainer {
width: 125px !important;
height: auto !important;
}

.eapp-events-calendar-list-item-imageContainer img {
width: 100% !important;
height: auto !important;
}

1 Like
2

Hi @Erik_Smith

Would you share the link to the widget?

3
4

Hi @Erik_Smith
Please use the widget’s Share feature. I don’t have access to your dashboard.
You can also send me the link in a private message.

image

image
image833×156 7.69 KB

5

It was related tot eh Grid layout. I am able to change the size of an image in Grid layout using CSS but unable to set its justification to flush right. When I resize an image in Grid layout th image is always flush left and the date thats set in the upper left corner blocks part of the image. SO Im trying to set the image flush right so its all visible.

Sorry the URL I provide is for the List layout that I went with because I couldnt get the CSS to work right in Grid layout.

1 Like
7

Got it, thanks!

I’ve forwarded your request to the devs and will update you tomorrow :slightly_smiling_face:

8

Hi @Erik_Smith :waving_hand:

Here is the code to move the image to the right in the Grid layout:

.eapp-events-calendar-grid-item-imageContainer {
  width: 125px !important;
  height: auto !important;
  margin-right: -32px;
  margin-left: auto;
}

Please add it to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped :slightly_smiling_face: