# Resizing blueprint slider **URL:** \ **Category:** Pinegrow Interactions Add-on\ **Tags:** css\ **Created:** [February 8, 2021, 11:59am UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935 "2021-02-08T11:59:32Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [February 8, 2021, 11:59am UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/1 "2021-02-08T11:59:32Z")
Hi, sorry for this question as it is more related to css than to interactions. Sometimes customizing someone else’s design gets “complex” easily. So I am trying to make the hight of the slider container “responsive”.I am overwriting pgia-slider to have be hight: x vh or min-max hight, but it won’t work. Before I reverse design everything… where is the hack? Thanks a lot. ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d55372bafbceea869e0fbd49f79c94b70f271894.jpeg) ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 8, 2021, 2:16pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/2 "2021-02-08T14:16:35Z")
Hi @red-rosefields, I asked the same question and never got any reply! Yes it’s a fixed height design not usable for real responsive images. And just setting one height is very limited. > [@Responsive images in Presentation Slider](https://forum.pinegrow.com/t/responsive-images-in-presentation-slider/4687): > > Hi, Have been trying Interactions 2 out and all looks very nice. I noticed that when a Presentation Slider is created you use links from Unsplash and object-fit: cover; I’m trying to implement Farkas Lazy Sizes in the slider and it works (it shows my images), but the problem is that I need: width:100% height:auto for the images and the slider should adapt to that. Is this possible to change in the CSS from within Pinegrow? Or do I need to rewrite the original CSS for this. I’m talking about the… Regards, David ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [February 8, 2021, 4:32pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/3 "2021-02-08T16:32:55Z")
mmm… Why create a interaction blueprint presentation slider and not make it responsive? ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 8, 2021, 5:43pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/4 "2021-02-08T17:43:47Z")
Yes exactly what I was thinking! Maybe @matjaz can shine his light over this? In the meantime I created a Bootstrap 4 slider With the help of @matjaz (for the interaction init) that is fully responsive with overlay text and Interactions. > [@How to set up a trigger in Bootstrap 4 carousel with Interactions](https://forum.pinegrow.com/t/how-to-set-up-a-trigger-in-bootstrap-4-carousel-with-interactions/4710): > > Hi, How do I set up a trigger in Bootstrap 4 carousel to be able to animate image overlay text on slide? [https://getbootstrap.com/docs/4.0/components/carousel/](https://getbootstrap.com/docs/4.0/components/carousel/) Example: [https://codepen.io/SitePoint/pen/MJXVMN](https://codepen.io/SitePoint/pen/MJXVMN) Regards & Thanks, David The actual Bootstrap slider: [https://yourweblab.nl/interactions-2](https://yourweblab.nl/interactions-2/) Only needs a little CSS/Interactions/ media queries tweaking to taste (left aligned text or different animations) It’s fully responsive with `picture` and `srcset` and has art direction works on all devices and contains jpg with webp fallback. To see the art direction you have to look in Chrome dev tools responsive app and watch phone portrait modes etc. ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [February 9, 2021, 9:14am UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/5 "2021-02-09T09:14:18Z")
Oh! Nice.Thank you @AllMediaLab. Hopefully, someone from the PG team can @RobM “revisit” their blueprint(s) having responsiveness in mind in order to make them ready-to-use. Otherwise, having to reverse design everything to make an image slider responsive implies a lot of time which is the main point for having these, otherwise, fantastic blueprints. For now, I think I will have to do without pg presentation slider. ☹ Have a good day. Carlos ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 9, 2021, 11:15am UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/6 "2021-02-09T11:15:58Z")
Hi @red-rosefields and @AllMediaLab, Can you share a little bit more about what you are trying to do? More specifically Carlos, what do you want the slider to look like in the end? Are the images supposed to “cover” the slider with it changing in height depending on viewport? Or are the images supposed to be resized to maintain aspect:ratio within the slider? Thanks, Bob ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 9, 2021, 11:37am UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/7 "2021-02-09T11:37:54Z")
Hi Bob, I like to see the behavior of the Bootstrap Carousel, meaning to be able to use foreground images and the slider should adapt to the image with width: 100% and auto height just like this slider I created: [https://yourweblab.nl/interactions-2](https://yourweblab.nl/interactions-2/) That way you can use any image, responsive images and even `` `` art direction and eventually Farkas Lazy Sizes: > **[aFarkas/lazysizes](https://github.com/aFarkas/lazysizes)** > > High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without... The way the slider is made now is not flexible enough (literally!). In short: A slider that can contain foreground images, width: 100%, Height: auto, Auto adjustment of the arrows and indicators etc. that adapt to the fluid design. Out of the box! Hope it makes sense to you 😉 David ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 9, 2021, 12:11pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/8 "2021-02-09T12:11:44Z")
I think it makes sense, but to clarify. Say you had 2 images: 1. 500x200 2. 1000x200 For image 1 you would want the image width to be 100% of the viewport size and then the height to be whatever multiple of 200 to get the full image without clipping? And you would want the overall area that the entire slider takes up on the page to be that same multiple of height? Then for the second image, the overall slider height would take up less of the viewport height because it is a shorter image compared to its length? Thanks, Bob ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 9, 2021, 1:47pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/9 "2021-02-09T13:47:10Z")
Usually you use 1 image of one size, except in my example with `` & `` I use 5 images different widths and height in the ratio 4:1 and 3 images with different sizes in the ratio 4.3. representing 1 image. The width and heights gradually change from: 5000px X 1500px to 1400px X 420px ratio 4:1 landscape image 1200px X 1000px to 600px X 500px ratio 4:3 portrait image But no matter if you only use one image the slider should adapt to that image in 100%width and Height:auto that’s simple to do with the Blue Print Slider except for the fact that the indicators and arrows and what else is not adapting to the image size and do stay on their place. (need auto adjustment) I’m not saying to skip this version of the slider, because it will serve a lot of people who like to set and forget with one image, but for the serious web designers (that want to save bandwidth) you need a slider with auto height. Just have a fixed height and auto height version that’s very common. When you want to use images of different sizes to show in the slider that’s a complete other story. Then you have to work with a outer-image element and a inner-slider element to keep the images in a certain size and height but responsive. ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [February 9, 2021, 4:32pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/10 "2021-02-09T16:32:16Z")
Hi guys I’m not sure if I’m totally clear about your issue but I want to put my feedback here. Slider blueprint has a fixed height applied to the main **pgia-slider** block, this is probably done for presentation purpose so it’s not intentional. Also **pgia-slide** blocks has some styles that you want to change in most cases. So if you remove the **height** from the **pgia-slider** it will adapt to the contents of the **pgia-slide**. Actually you don’t have to set height anywhere. But update the styles for **pgia-slide** to remove the CSS below ```auto align-items: center; justify-content: center; ``` You can also remove the background, as you would probably not need it. Now add your content or the image inside **pgia-slide** with 100% width and it should work as intended. I hope this solves your problem, do let me know. ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 9, 2021, 4:59pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/11 "2021-02-09T16:59:52Z")
Thanks @abirana, The issue is not that I can’t change the CSS, but that it’s easier to have a slider with auto height produced by the application. Can you please show a online example of what you mean (responsive image with overlay text), because I don’t understand your solution. Like this slider I created out of a Bootstrap 4 carousel: [https://yourweblab.nl/interactions-2](https://yourweblab.nl/interactions-2/) ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [February 9, 2021, 6:15pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/12 "2021-02-09T18:15:08Z")
I think he means this. Thanks, @RobM @abirana Override the class `.pgia-slides` height property from predefined value (in this case 400px) to `auto`. Bring the HTML src image and you give it a height, say` height="420px". 4 Example ` Then set image to have `object-fit: cover; height: 100%; width: 100%`; This actually works but you have to set the image src with a height in the Html so you can use height auto on the main slider container. `.pgia-slides` like this. [https://zdc-studio.com/pg-test/](https://zdc-studio.com/pg-test/) ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [February 9, 2021, 6:29pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/13 "2021-02-09T18:29:36Z")
Oh I see now I understand! Thanks for uploading the example @red-rosefields! Still prefer a out of the box solution with auto height so I don’t have to bother about individual heights of multiple responsive images. Thanks! @abirana ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [February 9, 2021, 6:56pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/14 "2021-02-09T18:56:10Z")
Thanks @red-rosefields for clearing that for me, when overwriting the CSS that’s what you need to do. That’s similar to what I did on [https://pinegrow.com/tutorials/creating-a-slider-with-interactions-2/](https://pinegrow.com/tutorials/creating-a-slider-with-interactions-2/) not on the base slider but on the example slider. But I did custom CSS on the slider classes. Thanks @AllMediaLab ya I do think that would be more useful. ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [February 9, 2021, 8:55pm UTC](https://forum.pinegrow.com/t/resizing-blueprint-slider/4935/15 "2021-02-09T20:55:02Z")
That is a nice tut there. On my to-do list.