CODEWITHSUNDEEP
htmlcss
ute nte
ute nte

Reputation: 15

How to make a div to be responsive?

Hello I have a problem with responsive of my div. I want that these two image when resize the window goes one below the other one. I have made a screenshot, so you can see exactly what I want. I'm not understand what's going wrong with my css code. Hope you help me.

.gender-selector input {
  -webkit-appearance: none;
  -moz-appearance: button;
  appearance: button;
  margin: 0;
  padding: 0;
}
.women {
  position: relative;
  left: 100px;
}
.man {
  position: relative;
  left: 210px;
}
<div class="gender-selector">
  
  <label>
    <input class="gender" type="radio" name="gender" value="w" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="180px" height="180px" class="women">
  </label>

  <label>
    <input class="gender" type="radio" name="gender" value="m" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" width="180px" height="180px" class="man">
  </label>

</div>

enter image description here

Upvotes: 0

Views: 77

Answers (3)

Moob
Moob

Reputation: 16184

There are several ways to achieve this. The following example we display the labels (blue border) beside each other using display:inline-block. They will then wrap one under the other when their container .gender-selector (red border) is too narrow for them to fit beside each other.

In this demo I've limited the width of .gender-selector to show the effect. Expand the snippet full-size to see them fit side-by-side.

.gender-selector input {
  -webkit-appearance: none;
  -moz-appearance: button;
  appearance: button;
  margin: 0;
  padding: 0;
}

.gender-selector {
  border:1px solid red;
  max-width:60%; 
  min-width:220px;
  margin:auto;
  text-align:center;
}
.gender-selector label {
  display:inline-block;
  position:relative;
  border:1px solid blue;
}
.gender-selector label img {
  padding:40px;
}
<div class="gender-selector">
  <label>
    <input class="gender" type="radio" name="gender" value="w" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="180px" height="180px" class="women">
  </label><!-- no whitespace here
--><label>
    <input class="gender" type="radio" name="gender" value="m" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" width="180px" height="180px" class="man">
  </label>

</div>

Upvotes: 0

oompahlumpa
oompahlumpa

Reputation: 503

What I would do is something like this. Wrap your <labels> in <div>'s your css would look something like this:

.gender-selector div {
  max-width: 350px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.gender-selector div img {
  width: 100%;
  height: auto;
}

I am pretty sure that should give you close to what you are looking for, you might have to tweak the max width to make it perfect for your needs.

Upvotes: 0

David Espino
David Espino

Reputation: 2187

I think your problem is how do you try to position the images. I have to admit that I have no seen a label containing elements but text, not sure if that is w3 compliant. But this fiddle does what you need.

.women {
  position: relative;
  left: 100px; // this may be the issue
}

https://jsfiddle.net/p4d9ueeL/

Just reduce the right panel (where the html is displayed) and you will be able to see the effect.

Regards

Upvotes: 1

Related Questions