Menu
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;
750
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
173
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!
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
