Images/Text not scaling to screen width

apacheguy · August 8, 2014

Ok, first off CSS is definitely not my strong suit so bear with me here. This is my code:

<style media="screen" type="text/css">
	/* <!-- */

	.clear{
		clear:both;
	}
		 
	#grid{
		width: 100%;
	}
	 
	.grid-element{
		width:33%;
		float:left;
	}
	
	a.clickable-div {
		display: block;
		height: 100%;
		width: 100%;
		text-decoration: none;
	}
	
	.img {
		height:auto; 
		width:inherit;
		max-height:100%;
		max-width:100%;
	}
	
	.button {
		color: #900;
		font-weight: bold;
		font-size: 150%;
		text-transform: uppercase;
		display: block;
		width: 50%;
	}
	
	/* --> */
</style>
<div id="grid"><div class="grid-element" align="center">
				<img src="images/light_offline.png" class="img">
				<p><h1>Hue Lamp 1
			</h1></div><div class="grid-element" align="center">
				<a href="action.php?light=2&state=false">
					<img src="images/light_off.png" class="img"></a>
					<p><h1>Hue Lamp 2
			</h1></div><div class="grid-element" align="center">
				<a href="action.php?light=3&state=false">
					<img src="images/light_off.png" class="img"></a>
					<p><h1>Hue Lamp 3
			</h1></div></div><p>
<div align="center">
	<form method="POST" action="action.php">
		<input type="hidden" name="scene" value="02b12e930-off-0">
		<input type="submit" value="Scene 1" class="button">
	</form>
	<p><form method="POST" action="action.php">
		<input type="hidden" name="off">
		<input type="submit" value="All Off" class="button">
	</form>
</div>

This is the browser output. A couple things are wrong:

1. Why aren't the images scaling so they are all the same size? I assigned the same CSS class to each of the images but they are all appearing differently. The original images are all the same size.

2. Why are my buttons in the far right corner? I want to have them centered below the images so as to prevent the horizontal scroll bar, which I hate.

Edited August 8, 2014 by apacheguy

WebOutGateway · August 8, 2014

Hi, apacheguy!

Try this:

<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
/* <!-- */
body{
 margin: auto;
 width: 100%;
 padding: auto;
}

#container{
 width: 980px;
 height: auto;
 margin: auto;
}
.clear{
 clear:both;
}

#grid{
 padding: 100px;
 margin: auto;

}

.grid-element{
  width: auto;
  padding: 0px 44px 0px 44px;/*sets the padding for the right and left sides*/
  display: inline-block;
  margin: auto;

}

a.clickable-div {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;
}

.img {
  height:auto; 
  width:inherit;
  max-height:100%;
  max-width:100%;
}

.button {
  color: #900;
  font-weight: bold;
  font-size: 150%;
  text-transform: uppercase;
  display: block;
  width: 50%;
}

/* --> */
</style>
</head>

<body>
 <div id="container">
   <div id="grid">
     <div class="grid-element" align="center">
       <img src="wog.jpg" class="img">
       <h1>Hue Lamp 1</h1>
     </div>

     <div class="grid-element" align="center">
       <a href="action.php?light=2&state=false">
       <img src="wog.jpg" class="img"></a>
       <h1>Hue Lamp 2</h1>
     </div>

     <div class="grid-element" align="center">
       <a href="action.php?light=3&state=false">
       <img src="wog.jpg" class="img"></a>
       <h1>Hue Lamp 3</h1>
     </div>
   </div> /*end div #grid*/

   <div align="center">
      <form method="POST" action="action.php">
        <input type="hidden" name="scene" value="02b12e930-off-0">
        <input type="submit" value="Scene 1" class="button">
      </form>

      <br/> /*instead of <p>*/
      <form method="POST" action="action.php">
        <input type="hidden" name="off">
        <input type="submit" value="All Off" class="button">
      </form>
   </div>
 </div> /*end of div #container*/
</body>
</html>

I've set the style of the <body> section. I've created another <div> for the whole content which is the #container. I've set your #grid's padding to 100px and the margin with auto. Also your .grid-element's width, padding. display and margin.

I hope this helps. Thank you.

Edited August 8, 2014 by WebOutGateway

apacheguy · August 8, 2014

Brilliant! I just made a few minor changes to your code, but it is finally where I want it to be. Your code had the images in 1 column with 3 rows, but I wanted that switched to 3 columns and 1 row. Here is the resulting CSS:

<style media="screen" type="text/css">
/* <!-- */
		body{
		 margin: auto;
		 width: 100%;
		 padding: auto;
		}

		#container{
		 width: 100%;
		 height: auto;
		 margin: auto;
		}

		#grid{
		 padding: 100px;
		 margin: auto;
		}

		.grid-element{
		  width: 33%;
		  display: inline-block;
		  margin: auto;
		}

		a.clickable-div {
		 display: block;
		 height: 100%;
		 width: 100%;
		 text-decoration: none;
		}

		.img {
		  height:auto; 
		  width:inherit;
		  max-height:50%;
		  max-width:50%;
		}

		.button {
		  color: #900;
		  font-weight: bold;
		  font-size: 150%;
		  text-transform: uppercase;
		  display: block;
		  width: 50%;
		}
	
	/* --> */
</style>

Sign In

Images/Text not scaling to screen width

Recommended Posts

apacheguy

Link to comment

Share on other sites

WebOutGateway

Link to comment

Share on other sites

apacheguy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information