Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Exclude Portfolio Grid Thumbnails from Responsive Scaling

Tavish Calico May 10, 2017 10:39PM CEST

Is there any possible way to Exclude Portfolio Grid Thumbnails from Responsive Scaling? (same functionality as what is possible within a project for images?)

Thank you!

Up 0 rated Down
Amanda May 11, 2017 01:08AM CEST Semplicelabs Agent

Hi Tavish,

Unfortunately there isn’t a setting for that.

Best,
Amanda

Up 0 rated Down
Tavish Calico May 11, 2017 02:13AM CEST
No problem. Thanks Amanda. Any sort of code snippet I could use for that? Or is it much more technical?
Up 0 rated Down
Amanda May 11, 2017 04:53AM CEST Semplicelabs Agent

Hi Tavish,

Do you just want them set to a certain pixel amount?

Best,
Amanda

Up 0 rated Down
Tavish Calico May 11, 2017 05:31AM CEST
Essentially yes, that is what I'm trying to do. I did implement a bit of custom CSS that made the thumbnails a fixed height (of 540px) but it didn't function totally right. if you could help that would be great!

Thank you.
Up 0 rated Down
Amanda May 11, 2017 05:21PM CEST Semplicelabs Agent

Hi Tavish,

Do you have a page you can show me with your thumbnails?

Thanks,
Amanda

Up 0 rated Down
Tavish Calico May 11, 2017 06:21PM CEST
Hi Amanda,

Yes. It's https://bondir.co/home-test/ for now.

Thank you!
Up 0 rated Down
Amanda May 11, 2017 08:38PM CEST Semplicelabs Agent

Hi Tavish,

This CSS prevents the images from resizing:

section#thumbnails .thumb img {
    width: auto !important;
    height: 540px !important;
}

If you need help on where to enter the CSS, this guide explains: http://help.semplicelabs.com/customer/portal/articles/2762667-guide-adding-custom-css-and-javascript-to-semplice

Best,
Amanda

Up 0 rated Down
Tavish Calico May 11, 2017 09:06PM CEST
Thanks Amanda!

That is definitely getting it closer. A couple things still no working fully right that I'm wondering if we can address.

Is there a way to make the thumbnail "frame" constrained to 540px height but allow the image within that frame to still scale with the browser?

If you look at that page now you'll see I've adjusted a couple project thumbnails with different size proportions to help counteract the empty space on the right of the browser window, but for X-large displays there would still be an empty space depending on the width of the browser VS. the width of the image.

I hope that makes sense.

Thank you so much for you attention on this!
Up 0 rated Down
Amanda May 11, 2017 11:42PM CEST Semplicelabs Agent

Hey Tavish,

Sure thing, understand where you’re going with this now!

Can you remove the CSS I gave you before so I can test some new CSS?

Best,
Amanda

Up 0 rated Down
Tavish Calico May 11, 2017 11:44PM CEST
Awesome, thank you! I've removed the code now.

Thanks Amanda!
Up 0 rated Down
Amanda May 12, 2017 03:22AM CEST Semplicelabs Agent

Hi Tavish,

I think this is maybe what you’re looking for?

@media (max-width: 768px) {
section#thumbnails .thumb .thumb-inner {
    height: 540px !important;
}
section#thumbnails .thumb img {
    height: 100% !important;
    width: auto !important;
    position: absolute;
    z-index: -2;
    transform: translateX(-30%);
}
}

Best,
Amanda

Up 0 rated Down
Tavish Calico May 12, 2017 03:49AM CEST
Yes! Amanda, you absolutely are the best.

Thank you thank you!

Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete