Responsive Carousel - Landscape for Desktop and Portrait for Mobile

[annbjer]

Hi Armin, sorry but i cant seem to find out if there is a way make the carousel responsive or set it to portrait mode for the mobile version. I wish to enable a fullscreen carousel on mobile mode, but my problem is that as my project thumbnails are using landscape and i cant find a way to enable separate project thumbnails for "mobile"

Might there be a way to:

A: add a second project thumbnail in Portrait mode (for mobile, my carousel is set to 9:16 there)

B: just use the carousel with images in mobile mode, problem is then that i cant find a way to hyperlink the images to the corresponding projects.

C: use a flexible / fluid container or frame for the project thumbnail so it would work both on desktop and mobile showing full image on desktop and resizing the frame to portrait mode on mobile?

Hope im making sense :-) :fingers_crossed:

Many thanks in advance and love your theme, big up's!

Daniel.

[mariusjopen]

Hi Daniel!

to understand you right. Are you talking about Thumbnails in general or the automatically generated Thumbnail grid?

Best!

Marius

[annbjer]

Hi Marius!

Thanks for replying and sorry to bust balls but im very fresh when it comes to code :-/ , so just to be clear, im not talking about the thumbnail grid but a way to add a fullscreen image slider (with welcome text, or project description centered) that will also be fullscreen but in portrait mode for the mobile version. :-)

Im not sure if there is a solution inside laytheme that can do this or if maybe some of the addons?.I have the Carousel addon installed now.

Here's an example of what i wish to achieve (view in mobile mode):
https://www.folchstudio.com/

I think this code could do it but how do i activate and use it or is this something Armin has already implemented?

See code found with Chrome inspect:
js flexbox canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths fp-enabled

Thanks for your help!

Daniel.

[annbjer]

No stress about the answer though, iv'e changed direction on my portfolio going back to basics without overdoing it with code i cant handle haha!

But if anyone knows it would be interesting to know if there's a way to have a responsive fullscreen slider that works for both desktop and mobile . A workaround could probably be to add a “Browser Height for Row Height” add some images that will work both horizontally as well as in portrait mode but thats not super accurate.

Thanks and have a great day!

Daniel.