PS: I'm very new to CSS and I'm trying my head around to work on a
mobile responsive UI, so please spare me if anything silly!
I have two devices with their widths and widths set as 360X640 and 375X667. I'm trying to write the css for these using #media but unable to make it work. The breakpoints which I set seems to be not working properly. Below is my code
#media(max-width: 360px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
#media (min-width: 361px) and (max-width: 375px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
}
Try using below css.
media only screen
and (max-device-width: 360px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
#media only screen
and (min-device-width: 361px)
and (max-device-width: 375px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
}
you ca use "all" for this subject.
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
There are a couple of things you should know beforehand when developing responsive. DON'T have a media query for every device. You'll end up
Having a media query for each device.
The maintainability of your code will be so difficult, especially when scaling
End up with large CSS files which will be bad for page performance.
The best way for a responsive CSS would be to follow the pattern of designing for mobile first and gradually making changes as the media queries get larger. eg
.un-progress {
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time {
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time {
margin-left: 22.0em;
margin-top: -2.5em;
}
#media (min-width: 480px) {
.un-progress{
// changes here
}
.finished_time{
// changes here
}
.left_time{
// changes here
}
}
}
#media (min-width: 768px) {
.un-progress{
// changes here
}
.finished_time{
// changes here
}
.left_time{
// changes here
}
}
}
#media (min-width: 1024px) {
.un-progress{
// changes here
}
.finished_time{
// changes here
}
.left_time{
// changes here
}
}
}
(change the media query min-widths as approriate) This would give you a much cleaner and lightweight CSS
Related
This question already has answers here:
Why media queries has less priority than no media queries css
(2 answers)
Closed last year.
In the media query I aske to position nav bar at the bottom and remove the margin-lef of the main section.
The media query make the job for the nav bar but not for the margin-left.
https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000
What’s wrong. ?
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
You simply have to put the media-query at the end of the CSS.
You default styling for #main-doc comes after the media-query, so overrides it.
It should look like this:
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
position: static;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
As you define the #main-doc {margin-left: 290px;} after the #media query it overwrites the media. if you open your browser developer console you can see the #media appears in smaller sizes but does not take effects. so you can just move the #main-doc {margin-left: 290px;} before #media or use the !important keyword to tell the browse 'whenever this media appears its more important. It's a best practice not to use !important too much cuz it can overwrite and cuz damage somewhere else.
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
OR
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px !important;
}
}
#main-doc {
margin-left: 290px;
}
I have problems with the media-query, it detects me well the first but when they are less than 768px it no longer detects the average
this are my media-querys.
#media screen and (max-width:1920px){
#log {
bottom: 36%;
left: 35%;
}
}
#media screen and (max-width:1440px){
#log {
left: 41%;
width: 57%;
bottom: 30%;
}
#img2 {
width: 100%;
}
}
#media screen and (max-width:1024px){
#log {
left: 61%;
width: 72%;
bottom: 30%;
}
#img2 {
width: 100%;
}
}
#media screen and (max-width:765px){ /***** this is the one that does not work
#Table_01 {
margin-top: -12%;
}
}
You can try this: jsfiddle Demo
#Table_01 {
display: block;
width: 100%;
height: 500px;
border: 1px solid black;
margin-top: 20px;
}
#media screen and (max-width: 768px) {
#Table_01 {
margin-top: -12%;
}
}
<table id="Table_01"></table>
Note: in some #media questions you have 2 spaces, try to use one only to avoid any possible issue.
The last media query just works when the width of the screen is equal or lower than 765px not 768px. Also need to close the comment with */
#media screen and (max-width:768px) { /* this is the one that does not work */
#Table_01 {
margin-top: -12%;
}
}
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
I'm trying to add mobile view for this page. I want article and div.sidebar.col-md-4 to be on left on mobile view (sidebar above article). Here's link to the page:https://ewelinawoloszyn.github.io/Press/#mm-0
Here's my code
#media (min-width: 992px){
div.sidebar.col-md-4 {
float: right !important;
width: 162px !important;
}
}
#media (min-width: 1200px){
div.sidebar.col-md-4 {
float: right !important;
width: 162px !important;
}
article{width:50% !important;
float:left !important;}
}
div.profile p{
text-align: justify;
}
div.profile p a{
float:right;
}
div.profile ul{
list-style: none;
padding-left: 0px;
}
h3.name{
margin-bottom: 30px !important;
}
article{
width: 50% !important;
float:left !important;}
#media (min-width: 992px)
.col-md-4 {
width: 33.3333%;
}
div.sidebar.col-md-4{
float:right;
width:162px;
}
div.profile img{
margin-bottom:20px;
}
img.arch{
width:120px !important;
height:100px !important;
margin-top: 18px !important;
float: left !important;
margin-right: 9px !important;
}
div#disqus_thread{
float:left;
width: 523px;
}
What happens when I add media query for 768px the article appears below left side menu which I don't want. How to add mobile view without resetting 1200px view?
Any advice much appreciated,
Kind regards
Neko
div.sidebar.col-md-4{
float:right;
width:162px;
}
Move this inside #media (min-width:768px), and just define another style for width <= 768px
i have started designing media queries for responsive design of a page. i have written 2 media queries which are as follows:
#media only screen and
(min-device-width : 320px)and
(max-device-width : 480px) {
#loginTable {
margin-left: 27%;
}
.slider-wrapper {
margin-left: 23%;
margin-top: 5%;
width: 52%;
}
.descriptionText1 {
margin-left: 12%;
font-size: 59%;
margin-top: 13%;
}
.header {
margin-bottom: 4%;
}
.descriptionText2 {
margin: 5% 0px 15% 12%;
font-size: 61%;
}
}
#media only screen and
(min-device-width : 768px) and
(max-device-width : 1024px) {
#loginTable {
border-color: rgb(204, 24, 24);
margin-top:2%;
margin-left: 2%;
}
.slider-wrapper {
margin-left: 47%;
margin-top: -31%;
}
.descriptionText1 {
margin-left: 4%;
}
.descriptionText2 {
margin: 1% 0px 0px 4%;
}
}
both the media queries are working fine on chrome, but the first media query is not working on firefox, whereas second query gives output as expected on firefox.
i tried using hacks only for first media query,
<style>
#-moz-document url-prefix() {
<link rel="stylesheet" type="text/css" href="css/responsive.css">
}
</style>
but the second query works fine on chrome as well as firefox without hacks. so i guess hack is not the solution. please help.
thanks