Hello there guys i would like to ask some questions about the media queries.
I have being working on a site who already have some responsivess on it.
And i'm forced to write the code on a clild theme and not on the original files so when i try to put inside some new media query it wont work.
Where the problem is
The site defaut media queries are
#media only screen and (max-width: 3000px)
#logo {
text-align: center;
padding-right: 120px !important;
float: none !important;
}
The target is the logo and i want to write something like this to change it on both landspace and portait.
#media screen only (max-width:480px){
#logo{
margin-left:-23%!important;
}
}
#media screen only (max-width:320px){
#logo{
margin-left:-39%!important;
}
}
When i try that with min-width and not max-width of course it will work but it will mess the rest.
The thought about max-width i have is
max-width:320px -> when the screen resolution under 320 use the code when it is not use the code of the 480px.
It is wrong?
You could do something like this:
#media only screen and (max-width:480px){
#logo {
margin-left: 0 !important;
}
#header {
padding-left: 0 !important;
}
}
And you won't need any media queries for 320px (so you should remove the media queries for 320px)
Related
Here is the link to the fiddle
I have
.hydrocarbons {
float: left;
width: 85.25%;
}
.claymore {
float: left;
clear: right;
}
in the medium #media, and
.hydrocarbons {
width: 91.67%;
}
in the smallest #media.
In the medium view, everything works as its supposed to, display is normal, not overridden by the smallest #media. But the large view is happily overridden by the medium #media, and I cannot figure out why this is happening. The media queries are written largest to smallest.
Thanks
Large screen like laptops/ desktops. Example:
#media (min-width: 768px){.div{width: 1px;}}
Small screen like mobiles. Example:
#media (max-width: 768px){.div{width: 1px;}}
You can use !important; to override but not recommended unless absolutely necessary.
I know this is a simple fix, but I am clueless on how to actually fix the problem. It's weird. On the desktop version, my logo is smaller than I want it to be because on the mobile it gets way too big.
Here is my css code:
#logo{
height:380%;
margin-top: -35px;
}
And here is my meta tag for other devices:
<meta name="viewport" content="width=device-width, initial-scale=1">
I also researched a bit and saw that I need an #media? Also here is the picture:
Here is my full css code as requested:
.navbar-text pull-left{
color:#000000;
text-decoration:none;
}
.navbar-text p{
color:inherit;
text-decoration:none;
}
.navbar{
border: 0px;
}
#logo{
height:500%;
margin-top: -35px;
}
#media only screen and (min-width: 640px) {
#logo {
height:150%; // Change this value
margin-top: -35px;
}
}
You can implement the equivalent of max-font-size with media queries
The idea is relatively simple.
You set the font size to 20vw - read about vw here - since it's
a logo.
you overwrite the font-size with a fixed size once the viewer size
exceeds a certain point - 450px in my example below.
The end result is that your font will adjust to the screen size and will be responsive.
Working example:
#logo {
font-size: 20vw;
text-align: center;
}
#media screen and (min-width: 450px) {
#logo {
font-size: 83px;
}
}
<div id="logo">"Quotin"</div>
Edit:
I just realized your logo is an image.
I trimmed the extra empty space off your logo in Photoshop because that's a lot easier than messing with negative margins in this case.
This should work on both mobile and desktop screens and be responsive without needing media queries
Working Example:
#logo {
margin: 0 auto;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
<a class="navbar-brand" href="http://www.quotin.co"><img class="img-responsive" id="logo" src="https://image.ibb.co/dTt4xv/8DL1n.png"></a>
I would replace 380% by a size in either pixel or rem.
Mobile screens have nowadays very high pixel density. Here is a good example on how to make a responsive logo https://getflywheel.com/layout/css-sprites-make-your-logo-responsive/
CSS3 Media Query is what you should be looking for. Assuming that your desired mobile width is 640px, put the following in your CSS to display it differently on mobile view.
#media (min-width: 640px) {
#logo {
height:150%; // Change this value to adjust logo size
margin-top: -35px; // Change this value to vertically move your logo.
}
}
Your code is all good. Just change min-width to max-width, and you're all set.
#media only screen and (max-width: 640px) {
#logo { height: 150%; };
}
Right now, what you are saying is:
#logo { height: 500%; } - Give the logo a height of 500%.
#media ..(min-width: 640px) {#logo {height: 150%;} } - If the screen size is at minimum 640px wide (or wider...), let the height be 150%.
I'm surprised nobody noticed this before.
So I have a queries.css that currently takes in
#media only screen and (max-width: 1140px){
.row,
.hero-img{
width: 100%;
}
}
#media only screen and (max-width: 930px){
/* code */
}
But when the browser(chrome) is at width of 1023, it registers the code for the max-width:930px media query.
Does anyone know what the issue is here. I saw other posts related and they had said to use min-width and the meta tag, both of which I did and still causes the same problem .
Also when I try to write code into my 1140px max-width media query, the media query for 930px overrides that one.
Try this
#media only screen and (max-width: 100%){
.row,
.hero-img{
width: 100%;
}
}
#media only screen and (max-width: 100%){
/* code */
}
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
So for some reasons when I add the # media query to my wordpress stylesheet, it breaks the styling of the first container. I have the proper brackets so I'm kind of confused as to why my code editor greys out the first container, in this case #navmenu.
#media only screen and (min-width: 1001px) and (max-width: 1499px) {
#navmenu {
margin-top: 50px;
float: left;
width: 15%;
margin-left:29%;
}
}
The same thing occurs, when I try to #media query wrap the original stylesheet to only load when the screen size is >1500px. The site's #wrapper breaks and all styling after that is broken, as if my brackets are not properly placed.