Question 244932 in Html Question posted in
Some basic documentation can be found here.

Html – Button not having a width in flex?

i tried to have 2 buttons in my flex carousel but it doesnt accept a width. I have been trying some things but they dont seem to change anything.

#container {
  height: 85vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.slide {
  position: relative;
}

img {
  position: relative;
  height: 60vh;
  width: 40vw;
  border-radius: 20px;
}

button[id*='button-'] {
  background-color: red;
  height: 10vh;
  width: 109000px;
  border: none;
}
<div id="container">
  <div class="slide">
    <img src="./img/roos.jpg" alt="foto van roos" />
    <h1 class="text-image">"Life is short"</h1>
  </div>
  <button id="button-previous"></button>
  <div class="slide">
    <img src="./img/hands.png" alt="foto van 2 handen als een hartje" />
    <h1 class="text-image">"Love is in the air"</h1>
  </div>
  <button id="button-next"></button>
  <div class="slide">
    <img src="./img/tree.jpg" alt="foto van een boom" />
    <h1 class="text-image">"Nature is life"</h1>
  </div>
</div>

i tried to give the buttons multiple types of width and checked if it worked by removing them from the flexbox and that worked.

Tags:

2

Answers


  1. 0

    I believe that you should be using flex-basis instead of width, when dealing with a flex item:
    https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

    flex-grow is another option to set a relative size:
    https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

    When using flex, you are telling it to manage the sizes instead, so width will be ignored. This makes more sense when you consider that flex can use flex-direction to decide to render things vertically and then flex-basis would be setting the height instead.

    Login or Signup to reply.
  2. 0

    A button width is base on the content of it inside. this is a sample of it. What I usually do is to trick it this way (   and put a text inside and color it transparent). then you can put a letter-spacing on it, font-size, padding and however you want it to make your proper width you want. You can alson enclosed the button on a div and then make the parent of the button work on the width. Let me know if this is what are you trying to attain.

    #container {
  height: 85vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.slide {
  position: relative;
}

img {
  position: relative;
  height: 60vh;
  width: 40vw;
  border-radius: 20px;
}

#button-previous, #button-next{
  background-color: red;
  height: 10vh;
  width: auto;
  border: none;
  font-size: 20px;
  letter-spacing: 20px;
  color: transparent;
  padding: 0px 20px;
}
    <div id="container">
  <div class="slide">
    <img src="./img/roos.jpg" alt="foto van roos" />
    <h1 class="text-image">"Life is short"</h1>
  </div>
  <button id="button-previous">&nbsp;<&nbsp;</button>
  <div class="slide">
    <img src="./img/hands.png" alt="foto van 2 handen als een hartje" />
    <h1 class="text-image">"Love is in the air"</h1>
  </div>
  <button id="button-next">&nbsp;>&nbsp;</button>
  <div class="slide">
    <img src="./img/tree.jpg" alt="foto van een boom" />
    <h1 class="text-image">"Nature is life"</h1>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search