I have the following simple HTML and CSS code with media queries which you can also find in the JSfiddle here:
/* Screenwidth as variable */
:root {
--min-width: 1041px;
}
/* homepage */
#media screen and (min-width:1041px){
.homepage {
height: 500px;
width: 400px;
}
}
#media screen and (max-width:1040px){
.homepage {
height: 300px;
width: 100px;
}
}
/* faq */
#media screen and (min-width:1041px){
.faq {
height: 800px;
width: 600px;
}
}
#media screen and (max-width:1040px){
.faq {
height: 700px;
width: 550px;
}
}
<div class="homepage">
Here goes content of homepage.
</div>
<div class="faq">
Here goes content of faq.
</div>
As you can see in the code I will have different pages on my website and they should have a different size depending on the device that is accessing the website. The media queries itself work perfectly already.
However, since I will have a lot of those media queries within in my CSS and I might want to change them to different sizes to test and try things it would be great to have the min-width and the max-width as variable within the :root part of the CSS.
Do you know if this is even possible and if yes how I have to change my code to make it work?
No, you can't use the css native variables in media query.
The :root, that is the element is a top-level parent. The other child elements can inherit from the root but the media query is not an element,
This can't be done through css.
you can use preprocessors like sass to accomplish this.
Related
In my Project, I set my background to an image I chose.
The code for that is here:
<body>
<img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>
I then use a media query in css. I am new to these queries and development in general, so please tell me if I am doing anything wrong or in an inefficient away.
My query basically says If the width of the page is 700px or less, set the image width to 100%. When testing this, my image doesn't refit to the page, instead stretches inwards causing a horrible effect to the image.
Here's my media query code:
#media screen and (max-width: 700px) {
.backgroundimg {
width: 100%;
}
}
Does anybody know why this isn't working? Thank you.
UPDATED:
CSS
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
object-fit:cover;
}
HTML
<div class="mydiv">
Placeholder
</div>
This code does not work correctly. I background to function exactly the same as it did with the image tag, this time with a div.
UPDATE 2:
This code does not set the width and height of the image to 100% of the page as expected.
HTML
<img class="bgimage"src="{% static 'spotifywallpaper.jpg' %}" alt="">
CSS
.bgimage {
width: 100%;
height: 100%;
object-fit:cover;
}
if you want the image to not be ugly while streching it on 100% of width
you can use object-fit property
e.g:
img{
width: //blabla
height: //blabla
object-fit:cover;
}
Also if you are using media query to change width on screen change you should not have width and height defined in inline style and I believe you know what inline styling is :d <3
Update:
Note that object-fit property is for img tag, but if you are going to use set background by using <img> tag it is bad practice you should use <div> instead with background-image:url('/images/someimage.png') property because div has much more efficent ways of manipulating background images.
Check this on the left on mentioned link, there are list of background properties
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
background-size:cover;
}
<div class="mydiv">
Placeholder
</div>
for more to know about background-size property checkout this link
First, you gave it inline code, inline code is stronger than external code so your media query code won't work for example
<div id="test" style="width: 100%; height: 100px; background-color: red;"></div>
And in css file you gave
#media screen and (max-width:700px){
#test {
background-color: black;
}
}
The result will be red background for all screen sizes because the inline code is stronger than the external code.
Try to transfer the inline code to the CSS file like this
#test {
width: 100%;
height: 100px;
background-color: red;
}
#media screen and (max-width:700px){
#test {
background-color: black;
}
}
Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so.
My media query is as follows:
#media only screen and (max-width: 540px) {
#wrapper {
width: 100%;
}
}
My normal css for the wrapper is as follows:
#wrapper {
width: 33.3%;
margin: 0 auto;
position: relative;
}
You have to put that media query BELOW the other rules in the stylesheet. The way you have it now (i.e. media query at the beginning of your stylesheet) it's overwritten by the general rule (containing width: 33.3%;) which follows below it.
https://codepen.io/anon/pen/GyPRVG
Let's say I have
#media all and (min-width: 360px) {
#navigation {
background-color: #dddddd;
display: block;
position: fixed;
top: 0px;
}
}
#media all and (min-width: 760px) {
#navigation {
background-color: #111111;
display: none;
position: fixed;
bottom: 0px;
}
}
this kind of CSS code (assume that I have div id="navigation" tag in the body tag.).
But if I run this code and change the size of browser to see the difference, it won't change as the size changes. The CSS attributes in the first media query statement is applied to the style, except the display attribute.
How do I make the other attributes to behave as it supposed to be?
edit: Here's the codepen for my project:
http://codepen.io/thatkoreanguy/pen/mJwPBW
Ok so I am going to assume the main problem here is when you are going to 360px width your div is not sitting at the top of the view port its stuck at the bottom?
When you have a media query it still inherits previous styles if you want to negate any you would have to return them to there default value which for bottom would be auto I believe.
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;
*
{
margin: 0px;
padding: 0px;
}
body {
background-color: #FFAF0A;
}
#wrapper {
width: 100%;
height: 1000px;
}
#header {
background-color: #222222;
height: 120px;
width: 100%;
}
#body {
width: 100%;
height: 700px;
}
#leftNav {
float: left;
width: 15%;
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 85%;
float: right;
height: 700px;
background-color: white;
}
#footer {
background-color: #222222;
height: 100px;
}
Hello all, this is my layout for my web page. Is this responsive? If not how can I make it responsive. When it comes to graphics what do i do with pixels? convert them to percentages?
Thank you in advance.
'Responsiveness' has more things to consider than making heights and widths in % of the total available. It should include css #media queries, should consider resized images for different screen widths, should also consider image layouts and dimensions for device positions like ipad vertical or horizontal.
This 'responsive' term is still not clearly defined and I can say the stylesheet you wrote above is not responsive.
EDIT
Since you are doing this in dreamweaver, it has all things you need to do for a responsive web scroll. Just follow to create responsive web page while starting a new project. Also, dreamweaver has really good interface in the bottom of the editor which has tabs of desktop, mobile device, and a tabular device icons which show how your code looks in each type of device. You should also have flexibility of jquery-mobile in it, because it contains all those things bundled, and more interestingly, it writes plain CSS for your wysiwyg editing. (Though it includes many stylesheets, beyond you feel their requirement).
You could also use css3 #media queries to include or exclude items depending on the size of you page.
A good way to experiment would be to shrink or expand your browser on a desktop of laptop computer.
For more on this, see..
Css Media queries
The others are correct about % though. When you use declare % rather that static px dimensions, you are setting your elements to adapt to a certain % of their parent elements.
Still your css will behave like liquid layout. It will break on very large screen. As you wish to create the website on 960px. So you have to give the css for wrapper like below:
#wrapper {
width: 960px;
max-width:100%;
height: 1000px;
}
due to max-width:100% your wrapper will automatically behave liquid format in small screens. Other child elements you can use % value as well.
Now there is a question how to convert fix px value to % or em.
So here is the simple rule to do this.
for em value: child width / parent width = em
For % value: (child width / parent width)x100 = %
Example:
#wrapper width is: 960px;
#leftNav width is: 200px;
#content width is: 750px;
Now for per you have to do follow the above mention rule:
#leftNav {
float: left;
width: 20.83333333333333%; /* (200/960)x100 */
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 78.125%; /* (750/960)x100 */
float: right;
height: 700px;
background-color: white;
}
you can use this rule to define the fonts size in percent or em .