First of all I want to say the Salient Theme is a great theme to work with! I like! ;-)
After many many years finally I'm working on my own portfolio-website now, using the magnificent Salient Theme. I've imported the minimal portfolio demo to adjust and while doing that, a question popped up in my mind...
Is it possible to change the wide and/or tall portfolio-images (set in a masonry grid) on a mobile device into square images? So, for example, the two right wide images in 'Mssiv_Desktop_view_No1.png' and the tall image of the building in 'Mssiv_Desktop_view_No2.png'? I want them all to have the same square size on a mobile device, but now the wide portfolio-images are shown landscape and the tall portfolio-images as portrait images... (as you can see on the other two attached images).
I hope this is possible in some way. Like to hear from you soon. Thanks in advance!
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):
Thanks for your quick reply. Unfortunately the code you've sent me doesn't work... The wide portfolio-images still are being shown as landscape images and the tall portfolio-images are still being shown as portrait images on my mobile device... Would you like to take a look at it again please? Thanks! ;-)
Hi there,
First of all I want to say the Salient Theme is a great theme to work with! I like! ;-)
After many many years finally I'm working on my own portfolio-website now, using the magnificent Salient Theme. I've imported the minimal portfolio demo to adjust and while doing that, a question popped up in my mind...
Is it possible to change the wide and/or tall portfolio-images (set in a masonry grid) on a mobile device into square images? So, for example, the two right wide images in 'Mssiv_Desktop_view_No1.png' and the tall image of the building in 'Mssiv_Desktop_view_No2.png'? I want them all to have the same square size on a mobile device, but now the wide portfolio-images are shown landscape and the tall portfolio-images as portrait images... (as you can see on the other two attached images).
I hope this is possible in some way. Like to hear from you soon. Thanks in advance!
Kind regards,
Rigo.
Hey Rigo,
Thanks for using Salient.
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):
@media only screen and (max-width: 690px) { .portfolio-items .col.elastic-portfolio-item.tall img,.portfolio-items .wide.elastic-portfolio-item img { min-height:80vw !important; object-fit: cover !important; max-height: 80vw !important; } }Thanks
ThemeNectar Support Team
Hey Tahir,
Thanks for your quick reply. Unfortunately the code you've sent me doesn't work... The wide portfolio-images still are being shown as landscape images and the tall portfolio-images are still being shown as portrait images on my mobile device... Would you like to take a look at it again please? Thanks! ;-)
Kind regards,
Rigo.
Hi Rigo,
Please send in your admin login credentials so that we can check this out further.
Thanks.
Hey Again,
Just cleared your litespeed cache and its working now.
Best
ThemeNectar Support Team
Hey Tahir,
Again, thanks for your quick reply and solving the issue! Looks great!
Kind regards,
Rigo.