Carousel - bigger image (zoomed on phone view)

Hi all,

When i was using rapidweaver/foundation any images I had in a slideshow banner, i had the option to have the image when on phone view to zoom into the centre of the subject and I could easily click this to open up so the image was partially full screen too or a lot more in height.

At the moment, i like the banners as they are in carrousel sliding on computer, tablet but want it bigger on phone view.

I am finding some of the simple things which foundation did, seems to be a lot longer to do on Blocs unless I am missing where this is?..i am hoping if I do 5 images per page on carousel, I do not not need to do 10 in total and recreate this separately for phone view also.

Any help ! cheers.

I have attached an image of what I am trying to achieve.

The only way to effectively achieve this is to duplicate the carousel on the desktop version and simply change the images to an aspect ratio that better suits the mobile version (portrait images). You would then hide the portrait version from desktop and tablet view and enable visibility on the mobile views. Likewise, you would hide the desktop/tablet version on the mobile breakpoints.


Thanks for the reply…yeah I was thinking this would be the case.
It is creating twice the work on something quite simple though - but if that is what it takes then ill have a try !

I am enjoying Blocs so far, but do find some of the simple things from Rapidweaver and quite long routed on this platform.

So far nearly everything ive tried to do is taking me 2-3 times as long.

Its been a while since ive been on, and have made the move as remember chatting to @Flashman a long long time ago on here and he convinced me to make the move !..well ive bought this and not bothered with Rapidweaver/foundation …so fingers crossed it pays off !!

It’s just a question of adopting to a different way of working. I find the same when I work in Affinity Photo after 20 years of using Photoshop and need to force myself a bit.

My understanding is that Foundation has largely been abandoned as a framework, so I wouldn’t want to be building anything on that right now.

The thing you have to remember about the bootstrap development environment is that content you place on the page will automatically size to fit the width of the column in which the element is placed. This helps to preserve the integrity of the responsiveness of your site. As screens get smaller, columns will adjust and sometime rearrange themselves to ensure that the content responds across a number of devices. In the case of the carousel, this too will adapt to different screen widths but will scale down to ensure that the slides in the carousel will be seen exactly as intended. In the past, I have worked with development environments where things such a carousels can have adjustments that, for example, preserve the height whilst adjusting the width. This invariably leads to the slide images being cropped and not always in a manner that looks good. Personally, I prefer to have full control over the images that get displayed in carousels on smaller screens. It only requires a set of slide images that suit different design width/heights. A simple duplication of the carousel and replacing the images for each device variant (usually only two variants) is a fairly quick and pain-free exercise.