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
Related
I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
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.
Be completely removed in the Media Query. How can I do so?
I have the following CSS:
#container {
width: 50%;
}
}
With media queries you can override the CSS when the device has a certain width.
So:
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: auto;
}
}
But you can't delete a CSS rule, in fact every element has all the CSS values already setted by default and by the browser and you just override some of them, if you ispect an element and go under "computed" tab of the developer tools you can see all the CSS atributes.
Those are the CSS file used by the browser (called user agent stylesheet):
Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css.
Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Internet Explorer (Trident), older versions: http://www.iecss.com/
However you can reset to default a CSS value using value:initial; so width:initial; but if you know the CSS default value (whitch is visible there) you can specific it (In this case width:auto;).
Read this to know more about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
the initial value of the width property is auto, which means that if you set the width to auto, it would be like no other width rule exists.
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: auto;
}
}
Also, since it is better to write Mobile-first css, I would remove completely the #container selector and add the following media query
#media screen and (min-width: 601px) {
#container {
width: 50%;
}
}
You can use the value initial. More info about it here: CSS Initial/Inherit
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: initial;
}
}
My understanding of your question is that you want to completely remove the width via media queries of your container correct? If so, simply add '0' to that ID for your width. If you prefer, you can put '0px' or '0%' but that really isn't needed. If this does not work, try adding '!important' to your media query like below.
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: 0;
}
}
or
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: 0 !important;
}
}
I want to control the size of my logo using media query.
The original width of my logo is 210px.
I want it to be 166px when the screen width is greater than 56.865em and same when it is less than this width, i.e., for mobile site.
I have written following code for this:
#media only screen and (min-width: 56.875em){
.site-branding img{
max-width: 166px;
}
}
#media only screen and (max-width: 56.875em){
.site-branding img {
max-width: 166px !important;
}
}
Only the first code block is working. Why isn't second working? (When the screen width is decreased, the width of logo becomes 210px again).
Is there any rule that you can't use both min and max media-queries to control same element?
The max-width rule won't work because it is overridden by the min-width since both have same value.
an easy approach, instead of doing 2 media queries is simply setting the logo's width in the general CSS and then apply a media query:
via non-mobile approach using the max-width
or
via the mobile first approach using min-width
Option with max-width
.logo img {
width: 210px
}
#media (max-width: 56.865em) {
.logo img {
width: 166px
}
}
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
Option with min-width
.logo img {
width: 166px
}
#media (min-width: 56.865em) {
.logo img {
width: 210px
}
}
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
UPDATE
First, I want the logo size 166px all the time.
So if you want after all is to have the logo's width at 166px all the time, meaning you want to change the current 210px to 166px
Then you don't need media queries. Assuming you are changing a custom CSS file and you can't/want to change the Base CSS file (which contains the width:210px) all you need is to be more specific.
See more about CSS specificity in MDN and in W3C Specs
/* emulating Base CSS */
.logo img {
width: 210px
}
/*being more specific */
.header .logo img {
width: 166px
}
<div class="header">
<div class="logo">
<img src="//lorempixel.com/300/300">
</div>
</div>
This drove me crazy but I found that commenting out text before #media will block the statement.
<!-- DO NOT COMMENT LIKE THIS BEFORE #media -->
/* USE THIS Comment version */
Hope it helps someone out!
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.