CODEWITHSUNDEEP
htmlcssstyling
user2451511
user2451511

Reputation: 117

How to make a DIV element responsive

So on my small website I have a div that I styled with CSS and as I was testing with various resolutions, the box looked distorted on a small 11 inch screen compared to my 27 inch screen. How can I make my 700 pixel heigth 200 pixel width div look the same size on all monitor sizes

Thanks

HERE IS THE CSS FOR THE DIV:

text-align:center; 
border:3px solid black; 
padding-bottom:10px; 
height:700px; width:200px; 
background-color: white; margin-right: 2cm; 
margin-top: -19cm; 
margin-left: auto;

Upvotes: 9

Views: 69491

Answers (5)

BradleyIW
BradleyIW

Reputation: 1358

You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.

HTML code:

<!doctype html>
    <meta name="viewport" content="width=device-width"/>

add the meta tag to allow for the page identify the width of the device. see Mozilla's take on this

In this example a query for four different device widths on a <p> tag and background will be applied. 

<body>
    <h1>Media Queries Examples</h1>
    <p>Increase or decrease the size of your window to see the background color change</p>
</body>

The CSS code:

p {
  font-family: arial,san-serif;   
  font-size: 13px;
  font-color: black;
}

h1 {
  font-size:30px;   
}

@media screen and (min-width:761px) {
  body {
    background-color:white;
  }
  h1 {
    color:red;
  }    
}

@media screen and (max-width:760px) {
  body {
    background-color: #333;
  }
  h1 {
    color:red;
  }  
  p {
    color: white;
  }
}

@media screen and (max-width:480px) {
  body {
    background-color: #807f83;
  }
  h1 {
    color:white;
  }  
  p {
    color: white;
  }
}

@media screen and (max-width:360px) {
  body {
    background-color: #0096d6;
  }
  h1 {
    color:white;
    font-size:25px;
  }  
  p {
    color: white;
  }
}

So using the @media Screen inside your css calls a query for the screen. You can use @Media all for all media devices (see further reading) when the device width reaches within the bounds of that query the css will then be applied to the element in question. see a current example. When you drag the box in the JSFiddle window, it'll change the color of the background and the color of the writing if the query is satisfied. You can apply the same logic to phones, tablets, tv and desktop. Media Queries for Standard Devices - CSS Tricks

This example was provided by an Anonymous user on JSFiddle. It provides a clear example of what is needed for you to ensure that your elements are styled in correspondence to the device in question. I take no credit.

Further Reading
- Microsoft - Media Queries
- @Media Rule - W3C
- Responsive Web Design Wiki

Upvotes: 7

Guy Goldenberg
Guy Goldenberg

Reputation: 819

There are a lot of ways to make a DIV responsive. The easiest one is to use a framework like bootstrap that does all of the work for you.

The other way is to use @media('max-width: 1024px'){//code...} this way you will define what will happen in each of the screen resolutions you want.

Upvotes: 0

Josh Murray
Josh Murray

Reputation: 31

You could do this to resize the page to fit any screen:

body {
  background: white;
  width: 100%;
}

.content {
  width: 100%;
}

.paragraphs {
  width: 50%;
  margin: 0 auto;
}
<html>
  <head>
    <title>Example of resizing</title>
  </head>
  
  <body>
    <div class="content">
      <div class="header">
        <h1>Header</h1>
      </div>
      
      <div class="paragraphs">
        <p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.

#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.

The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
      </div>
    </div>
  </body>
</html>

Thanks

Upvotes: 2

dakoto
dakoto

Reputation: 346

In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: https://www.udacity.com/course/mobile-web-development--cs256

Upvotes: 2

Jordan
Jordan

Reputation: 1121

You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.

A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.

This should also help give you a better understanding about how fluid grid systems are incorporated into your site.

Hope this helps!

Upvotes: 2

Related Questions