Hi I tried that. The original images are square. The default 30% gives me NEARLY square thumbnails on desktop (but wide rectangles on mobile). Any more than that (next up is 40%) and they start getting tall. Also the size varies somewhat depending on browser and OS.
And the shape varies when you resize the screen.
Conversely when I set a preview to be mostly square on mobile (can't get a square at all on mobile TBH) it is a very wide rectangle on desktop.
Is there no way to present the post featured images in their original Square format?
Use the Below CSS to show the images as-is without the height control taking effect.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
i want post previews in a post loop to disoplay as Square and not as tall rectangles. Is there any way to do this?
Hi there,
Thank you for reaching out to us.
Try using the Grisd layout and adjust the height till you get square images on your end. Here's a screenshot of the same.
Also, you need to disable the masonry layout in the post loop builder settings to achieve this.
Try this and let us know how it goes.
Kind regards,
Hi I tried that. The original images are square. The default 30% gives me NEARLY square thumbnails on desktop (but wide rectangles on mobile). Any more than that (next up is 40%) and they start getting tall. Also the size varies somewhat depending on browser and OS.
And the shape varies when you resize the screen.
Conversely when I set a preview to be mostly square on mobile (can't get a square at all on mobile TBH) it is a very wide rectangle on desktop.
Is there no way to present the post featured images in their original Square format?
Hey Again,
Use the Below CSS to show the images as-is without the height control taking effect.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#news .nectar-post-grid .nectar-post-grid-item .inner,#news .nectar-post-grid .nectar-post-grid-item-bg, body #news .nectar-post-grid .nectar-post-grid-item-bg img { position: relative !important; }Thanks
ThemeNectar Support Team