# Image Slider - How to Set Width to 100% of Parent Container **URL:** \ **Category:** How do I?\ **Created:** [August 30, 2024, 4:15pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550 "2024-08-30T16:15:01Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\ **Post date:** [August 30, 2024, 4:15pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/1 "2024-08-30T16:15:01Z")
How can I have WeWeb’s native image slider component inherit the width of the parent container its inserted into? I’ve tried leaving the image slider width to auto or 100% width. Whenever I insert the image slider into a container, the image slider is WAY too wide and extends far beyond the width of the parent container. I want my image slider to be 100% width of parent container. My images are set to auto for height and width. My parent container is set to inline-flex which is in a grid container that is bound to a collection of products. I’ve also tried inserting super small images like 20×20px in the image carousel, but the image width in a slide doesn’t seem to have an impact on the overall image slider width. ---
**Author:** ![DanielL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/daniell/32/13398_2.png) [@DanielL](https://community.weweb.io/u/DanielL)\ **Post date:** [September 2, 2024, 6:22pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/2 "2024-09-02T18:22:07Z")
Hi, have you tried setting the max width property of the parent? ---
**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\ **Post date:** [September 3, 2024, 6:59pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/3 "2024-09-03T18:59:51Z")
Yes, when I set a specific pixel width to the parent container it does work. However when using a responsive grid with a set number of columns, you can’t really set a fixed px width… In regards to setting a max-width on the parent container, yes but the image slider just causes the parent container to grow to that max-width size. So again, you can’t really set a fixed pixel width when using a responsive grid. I could create a variable that calculates the parent container width on window resize, but seems a little overkill for something that seems like it should be so simple? After chatting with support, it does sound like it is a weweb bug: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/59fdb5ca16a59e24401599ee311727afd3540273.png) ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 3, 2024, 7:01pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/4 "2024-09-03T19:01:09Z")
I had the same issue so +1 👍 ---
**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\ **Post date:** [September 3, 2024, 7:03pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/5 "2024-09-03T19:03:50Z")
This is what is happening currently: ![Screenshot 2024-09-03 111356](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/95d1d4a93044426d07d0e6c9758ea7fc1e09041b.png) The image slider causes the parent container to grow to become a crazy huge size. PS: A couple members of StateChange have also experienced this same issue over the past few months and have either implemented workarounds or created their own slider component. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 3, 2024, 7:54pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/6 "2024-09-03T19:54:32Z")
It seems to be the wrapper issue actually. I’ve pinpointed that the element’s wrapper seems to cause this under certain circumstances and one can tweak via the Dev Tools the divs above the element in question. But yeah, definitely a bug. It happens when the element is set to `height: 100%`, at least in my case and I also used some aspect ratios, which made it grow a lot. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b21f919609cbe83797227f7c3b5dff43d02b01a4.png) ---
**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\ **Post date:** [September 6, 2024, 2:16pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/7 "2024-09-06T14:16:45Z")
FYI Our team just reviewed your submission and confirmed that the issue you reported is a bug and will have to be fixed. Our engineers have an existing backlog of tasks and will start working on fixing your issue as soon as they will be available. We will get back to you when the problem has been corrected. Best regards, The WeWeb Customer Care Team ---
**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\ **Post date:** [October 14, 2024, 1:25pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/8 "2024-10-14T13:25:10Z")
@DanielL @Joyce - is there an ETA or update on this confirmed WeWeb bug? (#58TX9B9Os3wLet) My ticket has been “awaiting fix” for 39+ days now. ---
**Author:** ![Alexy](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexy/32/14034_2.png) [@Alexy](https://community.weweb.io/u/Alexy)\ **Post date:** [October 16, 2024, 9:18am UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/9 "2024-10-16T09:18:25Z")
@ryanev Hello, I’ve looked at the subject in detail and was able to solve the problem on a project with the same problem. In the element below grid (Properties in my example), could you try specifying overflow = hidden ? ![Capture d’écran 2024-10-16 à 11.13.27](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e9cb3922274048755d27c1ade333c61a9dbad9e8.jpeg) By default, it’s unset that may cause the overflow : ![Capture d’écran 2024-10-16 à 11.11.28](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/ddf3155bf47a26d8ff926aa4b1579c1af4e337cc.jpeg) ---
**Author:** ![ryanev](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@ryanev](https://community.weweb.io/u/ryanev)\ **Post date:** [October 16, 2024, 12:55pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/10 "2024-10-16T12:55:39Z")
Thanks @Alexy, yes I had tried changing the overflow setting previously, but unfortunately it did not resolve the issue. The slider still grows to be a massive size of 33,554,400x25,165,800 px Feel free to look at ticket #58TX9B9Os3wLet for a link to my project. And for what it’s worth, here’s another instance of someone else that is experiencing the same issue: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6f5ddb4711908af67bbe6bf7f482d0154287d728.png) ---
**Author:** ![Alexy](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexy/32/14034_2.png) [@Alexy](https://community.weweb.io/u/Alexy)\ **Post date:** [October 30, 2024, 10:08am UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/11 "2024-10-30T10:08:25Z")
> [@ryanev](#): > > 58TX9B9Os3wLet Sorry for the delay and thanks you for the reference. After having a look to it, I did the previous fix by putting overflow hidden on your **Hit Card** element and seems to have fixed your grid, can you confirm ? ---
**Author:** ![vfede](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/vfede/32/14020_2.png) [@vfede](https://community.weweb.io/u/vfede)\ **Post date:** [December 4, 2024, 1:16pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/12 "2024-12-04T13:16:07Z")
I managed to workaround this bug in my case. I calculate the width of the Slider. It’s far from ideal tho. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/098f7bbb23718c3f130b20e248f0561dc6f8f3f7.jpeg) For a solution that mantains the ratio of the paddings, I’m actually using a formula to calculate dynamically the parameter that is 0.8 in screenshot. I manually found the min and max ratio and interpolated the other ratios from that (it’s a linear formula). ---
**Author:** ![what.gift](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/what.gift/32/8069_2.png) [@what.gift](https://community.weweb.io/u/what.gift)\ **Post date:** [June 2, 2025, 8:34pm UTC](https://community.weweb.io/t/image-slider-how-to-set-width-to-100-of-parent-container/10550/13 "2025-06-02T20:34:35Z")
It appears the image slider still has width issues and this wasn’t resolved? I simply wanted to stack the images to the left instead of filling 100% of the space. As others report it infinitly expands if you try “align left”. A width calculation is the solution still it seems. Not ideal at all given the slider a should easily handle this. Otherwise it forces us to build our own sliders which I’ve had to do. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/274a861cf8d302c68ba5d9db7ac8131b89d8a6b5.png) The huge size from OP is related to infitinte expansion to the browser max px width. ### Common max layout widths (approximate): - **Chrome** : ~33,554,431 px - **Firefox** : ~17,895,698 px - **Safari** : ~1,000,000 px (older versions even less)