Jump to content
Keith Vaugh

[Solved] Flick slider height

Recommended Posts

Keith Vaugh

Is it possible to fix the height of the flick slider on a desktop (even with CSS)?

For example if I want images displayed 1100px * 600px to retain this ratio no matter what width the viewer is.

Thx

Share this post


Link to post
Share on other sites
Aires

Yes change the vh  to pixels with css. Provide a link and I will assist.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Keith Vaugh

Thx Aires. Just bounced a message along. The site is on a localhost for the moment while I migrate, so it's not live. 

Have added this CSS

.slider-gallery-cell {
    width: 100%;
    height: 600px;
}

Works fine for increasing the size, but when reducing for smaller mobile devices, the image no longer stays in the centre i.e. it aligns to the top. Then I tried this CSS but it didn't achieve what I want.

@media (max-width: 1200px) {
.slider-gallery-cell {
    width: 1100px;
    height: 600px;
}
}

 

Share this post


Link to post
Share on other sites
Keith Vaugh

The site is now live at https://www.magva.com 

I'd like to try and implement a solution to this. Ideally the ratio should be maintained across all devices.

Thanks in advance

 

 

Edited by Keith Vaugh (see edit history)

Share this post


Link to post
Share on other sites
Aires

HI, @Keith Vaugh

give this a try 

.slider-gallery {
    height: 600px!important;
}

 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Keith Vaugh

Thanks @Aires - no joy. The !important forces the slider to be 600px when on mobile also... What I really need to do is maintain the ratio to width to height as the screen is reduced in size.  

Is there a ratio setting somewhere or some CSS?

Edited by Keith Vaugh (see edit history)

Share this post


Link to post
Share on other sites
Aires

It might be best to do this on a media break point level.

600px for large 400px for med 300 for small could work 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×