Mobile view of site
#media screen and (max-width: 600px) {
.sidebar {
width: 100% !important;
height: auto !important;
}
}
#media screen and (max-width: 600px) {
.content {
width: 100% !important;
margin-top: 20px !important;
}
#media screen and (max-width: 600px) {
.jdzn-footer-text img {
width: 100% !important;
}
}
#media screen and (max-width: 600px) {
.featured-card {
width: 100% !important;
}
}
I have already have the meta viewport tag, can anyone help me resolve this? Thanks.
Not sure what your viewport meta tag look like, but you may try replacing yours with this viewport meta tag in your index file.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
Related
I was using media query and it was working, but now it just stopped working, but if I use the developer tool of the browser the media query works well
Here is my media query code, but I dont think that that is the error
#media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
display: block !important;
}
.contInputs,
.contInputs3 {
flex: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
width: 100%;
}
.last {
margin-bottom: 60px;
}
.contenido {
display: flex !important;
flex-wrap: wrap !important;
}
.contenedoresGen {
max-width: 100% !important;
width: 100% !important;
}
::ng-deep .mat-horizontal-content-container {
padding: 0 !important;
}
::ng-deep.mat-horizontal-stepper-content {
overflow: auto !important;
}
::ng-deep .mat-tab-label-container {
overflow-x: auto !important;
}
}
the screen was at a measure less thant the indicated in the media query
You need to add the following meta to your HTML in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I foun out the problem, it was my conditions, it neaded that the sceen be at 760px also the devie at the same time, I already had the meta tag before asking this, the solution was removing
and (max-device-width: 760px)
and it still working on movile because of the meta tag
I have my media queries at the bottom of my styles, I'm trying to make my grid be 50% of the screens width, however the 50% media query never seems to fire on a phone (iPhone 6s) however will on a browser re-size and I'm not sure why.
/* Media Queries*/
/* Max Width 1250px */
#media only screen and (min-width: 761px) and (max-width: 1000px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media only screen and (min-width: 501px) and (max-width: 760px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Try adding this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here's the MDN article on viewport meta tags
I have my CSS file, which looks like this:
.topBarBox{
background-color:black;
}
#media screen and (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
The background color of the div is black no matter what the screen size is. Am I doing something wrong here?
Change your media query
#media only screen and (max-width : 900px) {
.topBarBox{
background-color:blue;
}
}
You forgot the "only" keyword.
Change it to this:
#media only screen and (max-width: 900px) {
.topBarBox {
background-color:blue;
}
}
Make sure, your HTML page has following line in your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
And also, <!DOCTYPE html> above your <html> section.
This should work with:
.topBarBox{
background-color:black;
}
#media (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
Also, please make sure that either of html or body does not have any fixed width like:
body, html {
width: 1000px;
}
If there is such any CSS style, then remove it or change it like:
body, html {
width: 100%;
}
This worked fine for me:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.topBarBox {
background-color: black;
}
#media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="topBarBox">
Hello
</div>
</body>
</html>
Maybe you have some styles elsewhere in your CSS that override these styles?
You could try to use the web-inspector, that should make things clear.
Example:
.topBarBox {
background-color: black;
}
#media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
<div class="topBarBox">
Hello
</div>
Edit: found a grave mistake on my part int he code, nothing relevant for others with the same problem, I simply had a missing "}" on a media query above the ones not working.
Please explain like I am 5.
So I am trying to get my page to shuffle around some margins, change some floats and generally be responsive. I can't seem to get it to work. Basically what I want is for the CSS inside a #media query to toggle when the width of the browser window, not the device screen width, hits a certain mark. Right now that is not working. I figured that I'd use the cascading nature of CSS to override the fact that all of the #media CSS should be active when below the lowest max-width. This does not seem to be the case, instead I get the CSS from the 1600px one at some much lower resolution.
So I read up, and the more I read the more confused I get. Please help!
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
CSS
#media (max-width: 1600px ) {
.container .block_people .person{
margin: 0 0 500px 0;
}
}
#media (max-width: 1400px ) {
.block_people .person{
margin: 0 0 100px 0;
}
}
#media (max-width: 1200px ) {
.block_people .person{
margin: 0 0 100px 0;
}
}
#media (max-width: 1000px){
.container {
width: 100%;
margin: 0 auto;
padding: 0 0.5%;
}
.block_people .person{
margin: 0 0 100px 0;
}
}
#media (max-width: 800px ) {
.block_people .person{
min-width: 300px;
width: 90%;
float: left;
margin: 0 0 150px 0;
display: inline-block;
}
}
#media (max-width: 600px ) {
.buttons {
right: 225px;
}
nav.slide-menu-right{
width: 200px;
}
}
Your CSS looks relatively complex to me. Another way you could write your media queries is below, this approach may help you target styles and viewports more easily:
#media (max-width: 600px) {
}
#media (min-width: 601px) and (max-width: 800px) {
}
#media (min-width: 801px) and (max-width: 1000px) {
}
etc
If you want to try and get cascading to work, I usually set any default styles then build up from narrow to wide viewports. Doing it this way means that if you have set a style at a narrow viewport, you can easily override it at wider viewports (because the style will be further down the style sheet) e.g.
/* start with default styles */
#media (min-width: 601px ) { .... }
#media (min-width: 801px ) { .... }
#media (min-width: 1001px ) { .... }
#media (min-width: 1201px ) { .... }
#media (min-width: 1401px ) { .... }
Good luck!
I have website that with several divs. One of those divs need to be a specific with but this can variabate between 2 width. Is it possible some how to get it to only allow 2 width?
Examaple:
With resolution of page >= 700px div width = 500px
when page resolution < 700px div width = 200px
Use css media query like #media only screen and (max-width: 300px)
when you add
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
When you add like this when width is 300px it will automatically change to rule you added
A simple example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Answer
#media screen and (max-width: 700px ) {
div{
width: 500px;
}
#media screen and (min-width: 700px ) {
div{
width: 200px;
}
Use media queries:
#media only screen and (min-width: 700px) {
.my-div {
width: 500px;
}
}