Wondering how I can have images show full-height in the event detail view (single page)? There is an inline height of 400px currently added on desktop views (mobile shows the full height image).
Is there a way to either remove the 400px height and show the full image, or at least have the image link to the full size?
Thank you. How would you suggest handling this if every image might be a different size? This is a client site of mine, so I can't guarantee they'll always be using the same size. Would using height: auto; instead of calculating a padding-top perhaps work to base the slider on image size?
Edit: I did find an imperfect workaround if you don't have a different solution in mind. I just set the ratio to 1000/1000, and then added a "background-size: contain" inline on the div that gets the background image set within stec-layout-single-media-content in the single.php file.
Wondering how I can have images show full-height in the event detail view (single page)? There is an inline height of 400px currently added on desktop views (mobile shows the full height image).
Is there a way to either remove the 400px height and show the full image, or at least have the image link to the full size?
Attached files: Screenshot 2023-06-06 at 12.48.47 PM.png
Hi,
Go to Dashboard -> STEC -> Fonts & Colors -> Custom style tab and add following css:
/* Image slider aspect ratio */ :root { --stec-ar: calc(1500 / 844); } .stec-layout-single-media-content, .stec-layout-event-inner-intro-media-content, .stec-layout-grid-event-image { height:0 !important; padding-top: calc( 100% / var(--stec-ar) ) !important; }Adjust the values of 1500 and 844 according to the width and height of your images.
Stachethemes Developer
Thank you. How would you suggest handling this if every image might be a different size? This is a client site of mine, so I can't guarantee they'll always be using the same size. Would using height: auto; instead of calculating a padding-top perhaps work to base the slider on image size?
Edit: I did find an imperfect workaround if you don't have a different solution in mind. I just set the ratio to 1000/1000, and then added a "background-size: contain" inline on the div that gets the background image set within stec-layout-single-media-content in the single.php file.