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;
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
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!
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
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
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.
Related
Lets you say you have two media queries on an element that both match. How do you know which one wins?
For example, let's say you have a media query that sets a rectangle to be red at LESS than or equal to 500 pixels and you a media query that makes it blue at MORE than or EQUAL to 500 pixels. Which one wins? And let's say you have a phone that is 500 pixels wide.
hr {
width: 400px;
left: 10px;
top: 0;
position: absolute;
}
.rect {
left: 10px;
position: absolute;
top: 20px;
right: 10px;
}
#media (max-width: 400px) {
.rect {
background-color: lightgray;
}
}
/* larger content */
#media (min-width: 400px) {
.rect {
background-color: lightblue;
}
}
<div class="rect">
Here is a div
</div>
<hr width="500px">
I would like to setup proper media break points. Do I need to rewrite them? Should they be min-width 501px and so on?
Normally it's the style declaration that comes last in the code that "wins" (is applied!). You can set !important on a style declaration, but IMHO that is toss-up and sometimes doesn't work. I 'think' id styles will have more importance over class styles, but I do know you can set multiple class name styles more influential.
Code not tested:
#less_important {
background : green;
width : 50px;
height : 50px;
}
.blue {
background : blue;
width : 50px;
height : 50px;
}
.red {
background : red;
border : 1px solid yellow;
}
<html>
<div id = "less_important" class = "blue">
</div>
<div class = "blue red">
</div>
<div class = "red blue">
</div>
</html>
Move the style .red and .blue in the code and see what happens to understand
CSS mean Cascading Style Sheets.
Definition of cascade:
"Something arranged or occurring in a series or in a succession of stages so that each stage derives from or acts upon the product of the preceding."
So, whatever comes after in the cascade will overwrite the previous.
Yes, you should set the one with min-width to 401.
I remade a page using Bootstrap 4 and cannot seem to figure out why the footer background color is not showing. The page is up here
.footer {
width: 100%;
font-size: 1.5rem;
text-align: center;
overflow: visible;
color: #004289;
font-weight: bold;
height: 2rem;
background-color: #CFFEEE;
}
<footer class="footer">
<div class="container">
<div class="text-center">Copyright © <script>document.write(new Date().getFullYear());</script> The Driftwood</div>
</div>
</footer>
I think my brain is exploding over something that should be so simple. Thanks
edit: it appears how I would like in the Run Code Snippet manager below. If you need more code just ask, or view the live page.
this is what I see
in the head section I link to the BS css and to my custom css like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">
Your .container white background is overriding it, since it is a more specific selector than .footer.
To override you can do:
.footer .container {
background-color: #CFFEEE;
}
Your page Your page link has the proper footer background in desktop but in mobile it is white. The reason behind it is , you have defined
#media (min-width: 767px)
custom-bs4.css:395
.footer .container {
background-color: #CFFEEE;
}
So when it comes to mobile size the width get reduce from 767px. SO your this condition does not get satisfied. Instead,it is applying the below style:
.container {
background-color: #fff;
}
So only on your mobile background color is white.
So try using one more #media for mobile screen what color you want for footer or remove the specification for #media min-width for the footer.
Also you can give a try :
.footer .container {
background-color: #CFFEEE;
}
To remove the background of .container:
.container {
background: none;
}
You can also define it as standard:
* {
background: none;
}
I think this is a better option than giving the .container the same background, cause this can help you fix a lot of other problems
In the link to the website it seems like you have a problem with the css:
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,51,102)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
.navbar .navbar-toggler:hover span.icon-bar {
background: #004289;
}
If you note, the span.navbar-toggler-icon has an open { but not a closing one. Starting from there - the entire css file is not valid (syntax error since you didn't close that selector).
You can use the following css validator to check your css:
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdriftwoodrentals.com%2Fdist%2Fcss%2Fcustom-bs4.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
I could see background #fff for your innercontainer .container element. that overlaps your footer background color.
.container {
background-color: #fff;
}
line no 10 in custom-bs4.css
You may have to reload your css page... It may have been cached for you ;)
Thanks everyone! I didn't think of adding .footer .container {
background-color: #CFFEEE;
}
It works when the page is full screen but when it's minimized narrower, like mobile, the footer area goes back to white again with the navy text. How can I fix that?
i am just learning how to use bootstrap and media queries for the first time. I am trying to make some text get smaller when the screen gets smaller , however for some reason i am not sure why bootstrap does not do this, does this mean i need to use media queries ? or is there a function in bootstrap ?
HTMl:
<div class = "Logo">
<a class="navbar-brand" href="#">
<h1>Hello</h1>
<h2>There</h2>
<h3>You</h3><br/>
<p>Time To make a change</p>
</a>
</div>
CSS:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
}
I want it so that when someone was to launch it in an iphone etc the text which is in the navbar will just shrink and become smaller, but for some reason it is not doing it.
Thanks again for all the help , sorry if this is a basic question but just trying to understand bootstrap etc :)
I think you can just use:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
Logo.h1 { font-size: 80%; }
Logo.h2 { font-size: 80%; }
Logo.h3 { font-size: 80%; }
}
This will make it 80% of the original size.
Source: W3schools
you can solve your issue by simply adding 'viewport' meta tag in your html.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This meta tag scales your whole content according to the dimensions of the device the web page is currently being viewed on. You can find more about this tag here.
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.