CODEWITHSUNDEEP
javascripthtmlcss
DanielsCake
DanielsCake

Reputation: 1

How do I make these buttons responsive?

I have an HTMl and a CSS instance.

I'm trying to make these buttons get smaller based on the screen size and to correlate into a column. Right now when I change the window size the buttons just disappear. 

/* grid */ 

.col-1of1 {
width: 100%;
margin-left: auto;
margin-right: auto;

}

.col-1of2 {
width: 50%;
float: left;
}

.col-1of3 {
width: 33.33%;
float: left;
}

.col-1of4 {
width:25%;
float: left;    
}

.col-1of5 {
width: 20%;
float: left;
}

#p-button {
font-size: 1.5vmin;
color: white;
background: #F0AB00;
    position: relative;
width: 200px;
min-width:20px;
height: 50px;
border-radius: 6px;
margin-top: 180px;
margin-right: 25px;
margin-left: 25px;
line-height: 50px;
text-align: center;

    -webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
}

#p-button: hover {
background: #970A82;
}
<p id="player-text">Please select the number of players</p>

<div class="col-1of1" id="options">
<a href="form1.html?player=1&form=1"><p class="col-1of4" id="p-
button">1 Player</p></a> <!--button--> 
<a href="form1.html?player=2&form=1"><p class="col-1of4" id="p-
button">2 Players</p></a> 
<!--button--> 
<a href="form1.html?player=3&form=1"><p class="col-1of4" id="p-
button">3 Players</p></a> <!--button--> 
<a href="form1.html?player=4&form=1"><p class="col-1of4" id="p-
button">4 Players</p></a> <!--button--> 
</div>

Upvotes: 0

Views: 397

Answers (5)

Shifut Hossain
Shifut Hossain

Reputation: 1699

CSS media queries is a great feature to do it. You can do it by media queries

For example: 

@media(max-width: 767px){
  .col-1of2,.col-1of3,.col-1of4,.col-1of5 {
    width: 100%;
    float: none;
  }
  #p-button{
    font-size: 1vmin;
    width: 100px;
  }
}

NB: I noticed that you use the same ID much time.Remember ID is a unique identifier. if you need to give the same style more than one element you have to use Class.

Upvotes: 1

Eternal
Eternal

Reputation: 316

First of all is that you have a lot of redundant code. I made it work with only one id="options" All you needed was reffering to the width of buttons in %. I also included a cool calc() function which allows using both percentages and pixels when reffering to size of an element

#options {
  width: 100%;
}
#options a {
  display: block;
  float: left;
  color: white;
  background: #F0AB00;
  position: relative;
  width: calc( 25% - 30px );
  margin: 15px;
  border-radius: 6px;
  line-height: 50px;
  font-size: 1.5vmin;
  text-align: center;
  -webkit-transition-duration: 0.3s; /* Safari */
  transition-duration: 0.3s;
}
<p id="player-text">Please select the number of players</p>

<div class="col-1of1" id="options">
  <a href="#"> 1 Player </a> <!--button--> 
  <a href="#"> 2 Players </a> <!--button--> 
  <a href="#"> 3 Players </a> <!--button--> 
  <a href="#"> 4 Players </a> <!--button--> 
</div>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

For starters, you have all your p elements with the same id and the only reason you are using that id is for CSS styling. ids must be unique. p-button should be a class, not an id.

Next, you have your column class set to be responsive because you are using a percentage for the width (that's good), but then you are hard coding the p elements to a width of 200px, which is overriding that percentage because you had the p elements using an id based selector (the most specific type of selector). Changing to classes and removing the static 200px width allows the buttons to grow/shrink.

After that, using min-width and max-width is an essential part of responsive design because people may have tiny or huge viewports and you need to set reasonable limits.

Also, (while technically valid), it's better to put a elements inside of the p elements for better semantics.

Here's a cleaned up version. Run the code snippet and then click the "full page" link at the top, right of the window to expand it and you will see the buttons get bigger and go from a grid layout to a row layout. Then, click the "close" link at the very top, right of that window and you'll see the buttons shrink and change their layout again.

/* grid */ 
.col-1of1 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.col-1of2 {
	width: 50%;
	float: left;
}

.col-1of3 {
	width: 33.33%;
	float: left;
}

.col-1of4 {
	width:25%;
	float: left;	
}

.col-1of5 {
	width: 20%;
	float: left;
}

.p-button {
	font-size: 1.25vw;
	background: #F0AB00;
  position: relative;
  min-width:75px;
  max-width:125px;
  height: 50px;
  border-radius: 6px;
  margin: 2em 2em 0 2em;
  line-height: 50px;
  text-align: center;
    
  transition-duration: 0.3s;
}

.p-button a {
	color: white;
}

.p-button:hover {
	background: #970A82;
}
<p id="player-text">Please select the number of players</p>

    <div class="col-1of1" id="options">
    
      <p class="col-1of4 p-button">
        <a href="form1.html?player=1&form=1">1 Player</a>
      </p>
      <p class="col-1of4 p-button">
        <a href="form1.html?player=2&form=1">2 Players</a> 
      </p>
      <p class="col-1of4 p-button">
        <a href="form1.html?player=3&form=1">3 Players</a>
      </p> 
      <p class="col-1of4 p-button">
        <a href="form1.html?player=4&form=1">4 Players</a>
      </p> 
      
    </div>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

You have a paragraph inside the hyperlink and the hyperlinks do not have a float:left. Make the following changes:

.col-1of4 {
  width: 100%;
  float: left;
  white-space: nowrap;
}
a {
  float: left;
  width: 25%;
  text-align: center;
}

Upvotes: 0

BizedKhan
BizedKhan

Reputation: 644

You can use Media Queries. For Example.

@media(max-width: 767px){
    #p-button{
        font-size: 1vmin;
        width: 100px;
    }
}

Upvotes: 2

Related Questions