Image slider problems
Permalink Browser Info Environment
Hello
I am having problems with the image slider in the banner on the subpages. I have read the other support messages and can't seem to fix it - basically when I use a banner image (through the attributes) the image looks tidy and contained with the scroller underneath it. When I try to add an image slider into the banner editable area without using the c5box full slider custom template it again looks tidy and contained but there is a huge background area above and particularly below it, which looks especially bad in small (phone) screen sizes. When I add the c5box full slider custom template it looks even worse - the images are enlarged and spill out of the area covering the scroller and again this looks particularly bad in the phone screen size as it takes up a lot of room, and as only a tiny fraction of the image is shown that makes it look even worse (I realise this last point is due to the responsive nature of the images).
I have spent a lot of time fiddling with the Inspect Element function and altering the css (playing around with contain and the banner height etc) but cannot get it to look neat and the same as it does when there is just a single image there using the attribute without the extra spacing top and bottom.
Can you help?
Thanks so much in advance.
Lucy
I am having problems with the image slider in the banner on the subpages. I have read the other support messages and can't seem to fix it - basically when I use a banner image (through the attributes) the image looks tidy and contained with the scroller underneath it. When I try to add an image slider into the banner editable area without using the c5box full slider custom template it again looks tidy and contained but there is a huge background area above and particularly below it, which looks especially bad in small (phone) screen sizes. When I add the c5box full slider custom template it looks even worse - the images are enlarged and spill out of the area covering the scroller and again this looks particularly bad in the phone screen size as it takes up a lot of room, and as only a tiny fraction of the image is shown that makes it look even worse (I realise this last point is due to the responsive nature of the images).
I have spent a lot of time fiddling with the Inspect Element function and altering the css (playing around with contain and the banner height etc) but cannot get it to look neat and the same as it does when there is just a single image there using the attribute without the extra spacing top and bottom.
Can you help?
Thanks so much in advance.
Lucy
| Type: | Ticket |
|---|---|
| Status: | In Progress |
I've actually just managed to stop it spilling over the scroller (that was a bit of code I had altered) but the slider is still too high, much higher than the 600px of the innerpage banner.
Hi there, thanks for reaching out.
For the banner part, there should be an element there that I set to height: 100vh. This element occupies the entire length of the vertical screen. I think this maybe the element you are looking for.
If you have your site up and running, please share a link so I can help inspect.
James
For the banner part, there should be an element there that I set to height: 100vh. This element occupies the entire length of the vertical screen. I think this maybe the element you are looking for.
If you have your site up and running, please share a link so I can help inspect.
James
Hi James
Thanks so much for your speedy reply! That was very helpful, I had played around a bit with the viewpoint height but I had problems with the padding so I couldn't quite get it right.
For anyone else having this problem in the future I fixed this by putting this code in the custom css section of the Design area of Concrete5. 625 pixels is the height of my images in the image slider.
This seems to work nicely - the images are not taking up the whole viewpoint area now and I can still see the scroller.
Cheers
Lucy
Thanks so much for your speedy reply! That was very helpful, I had played around a bit with the viewpoint height but I had problems with the padding so I couldn't quite get it right.
For anyone else having this problem in the future I fixed this by putting this code in the custom css section of the Design area of Concrete5. 625 pixels is the height of my images in the image slider.
.master-container #banner .bancontcenter .rslides>li { height: 625px!important; width: 100%; } .master-container #banner .bancontcenter { display: table-cell; vertical-align: middle; position: relative; padding: 0px 0px 30px 0px!important; z-index: 499; width: 100%; }
This seems to work nicely - the images are not taking up the whole viewpoint area now and I can still see the scroller.
Cheers
Lucy