i want to implement following styles for 900 to 1023px
.navbar-brand {
float: left;
margin-right: 5px;
margin-left: -15px
}
.navbar-nav {
float: left;
margin-top: 0;
margin-bottom: 0
}
.navbar-nav>li {
float: left
}
.navbar-nav>li>a {
border-radius: 0
}
.navbar-nav.pull-right {
float: right;
width: auto;
margin:10px 0 ;
}
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none
}
.nav-collapse.collapse {
display: block!important;
height: auto!important;
overflow: visible!important
}
i applied following media query
#media screen (min-width: 900px) and (max-width: 1024px) {
// here goes above code
}
but problem is that these stlyes are being applied on 1300 + resolution as well . whats wrong with it please help
You miss and after #media screen
#media screen and (min-width: 900px) and (max-width: 1024px) {
// here goes above code
}
Related
Im very confused at the moment, so im trying to create a responsive website.
For some reason my media queries are not triggering? I have the below CSS and it works fine from X-Small Below 480px and up to 575.98px. but past the media query, anything that I add into the 767.98px range isnt working at all?
#media only screen and (min-width : 480px) {
.card-4{
display: none;
}
}
#media (max-width: 575.98px) {
#about{
padding: 0 0.5rem 0 0.5rem;
}
.about-photo img{
width: 70%;
}
.about-text{
margin: auto;
text-align: center;
padding: 1rem 0 3rem 0;
}
.about-text h1, .about-text p{
text-align: center;
float: none;
}
.table{
margin: 0;
padding-left: 0;
}
.table li{
margin: auto;
padding-top: 0.3rem;
padding-left: 2rem;
text-align: left;
}
#skills-list{
margin: 0 2rem 0 2rem;
}
#skills-list li{
text-align: left;
padding-bottom: 1rem;
}
.card-1{
display: none;
}
.card{
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.cards-container{
margin: 0 !important;
}
.timeline > li > .timeline-panel {
width: 85%;
float: right;
padding: 1.2rem;
}
.timeline:before {
left: 6%;
}
.timeline > li > .timeline-badge {
width: 44px;
height: 44px;
left: 6%;
}
.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.square-1-text, .square-2-text, .square-3-text{
height: 31rem;
}
.square-1{
order:1;
}
.square-1-text{
order:2;
}
.square-2{
order:3;
}
.square-2-text{
order:4;
}
#passions-section{
padding-bottom: 0;
}
#skills-list li.i{
list-style-position: outside !important;
display: none;
}
/*// Small devices (landscape phones, less than 768px)*/
#media (max-width: 767.98px) {
}
/*// Medium devices (tablets, less than 992px)*/
#media (max-width: 991.98px) {
}
/*// Large devices (desktops, less than 1200px)*/
#media (max-width: 1199.98px) {
}
Using the right breakpoints in your CSS media queries is likely the most important decision when implementing a fully responsive site.
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
In your case Try this one
#media (min-width:500px) and (max-width:750px)
My page has a white space on the right side when using margins and padding in the mobile view.
My page:
https://www.blazor.nl/uploads/get/a83c2617117c88b0/IMG-0002
My CSS:
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper {
margin: 0 50px 0 50px;
min-height: 600px;
position: relative;
top: -120px; }
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 30px; } }
#media only screen and (min-width: 768px) and (max-width: 992px) {
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 20px; } }
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper > h2 {
color: #ffffff;
margin: 0 0 10px;
font-weight: 300; }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper > h2 {
color: #696969;
font-size: 24px; } }
#media (max-width: 992px) {
.page-wrapper .page-container .content-wrapper {
margin: 30px 30px 0 150px; } }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper {
margin: 15px; } }
I am using a snippet which can be found here: https://bootsnipp.com/snippets/dexRM. I also use Bootstrap 3.
Thanks
ERRORS
#media only screen (min-width: 1021px) and (max-width: 1180px) {
.twee img {
margin-top: 3em;
}
.drie {
margin-top: 3em;
}
.audiovisual iframe {
width: 90%;
}
.cp img {
width: 75%;
height: 75%;
display: inline;
padding: 0;
}
}
#media only screen (min-width: 791px) and (max-width: 1020px) {
body {
background-image: url(IMG/Sam-open-copy-1020.jpg);
}
.twee img {
margin-top: 7em;
}
.drie {
margin-top: 7em;
}
.zes {
margin-top: 2em;
}
.audiovisual iframe {
width: 90%;
}
.kaart iframe {
width: 75%;
height: 75%;
padding: 0;
margin: 0;
padding-bottom: 2em;
}
.cp img {
width: 75%;
height: 75%;
display: inline;
padding: 0;
}
#totop {
right: 0;
}
}
So this is my code, my mediaqueries won't apply on my HTML.
When I validate I got these errors.(see the image ERRORS) But I can't find out what's wrong with it? I checked everything but probably I can't find it because I look over it or something....
Add an extra 'and' in your #media query:
#media only screen and (min-width: 1021px) and (max-width: 1180px) { ...
I'm using Prepros to compile my SCSS files to CSS, but it gives me an error when i try to use media queries. I tried Coala and Scout as well.
If i just copy this code into output CSS it works.
What am i doing wrong?
#media only screen and (max-width: 320px) {
body {
width: 320px;
}
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
#media only screen and (min-width: 320px) and (max-width: 610px) {
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
#media only screen and (min-width: 610px) and (max-width: 950px) {
.wrapper {
width: 650px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 650px;
margin-left: 10px;
}
}
#media only screen and (min-width: 950px) and (max-width: 1024px) {
.wrapper {
width: 950px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 950px;
}
}
Error code:
Error: Invalid CSS after "": expected selector, was "#media only scr..."
on line 169 of style.scss
164: width: 650px;
165: margin-left: 10px;
166: }
167: }
168:
169: #media only screen and (min-width: 950px) and (max-width: 1024px) {
170: .wrapper {
171: width: 950px;
172: margin: 4% auto;
173: }
174: .name {
Backtrace:
style.scss:169
c:/Program Files (x86)/Prepros/resources/app/ruby/ruby_gems/gems/sass-3.4.9/lib/sass/scss/parser.rb:1165:in `expected'
Try this it is a copy/paste mistake
#media only screen and (max-width: 320px) {
body {
width: 320px;
}
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
#media only screen and (min-width: 320px) and (max-width: 610px) {
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
#media only screen and (min-width: 610px) and (max-width: 950px) {
.wrapper {
width: 650px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 650px;
margin-left: 10px;
}
}
#media only screen and (min-width: 950px) and (max-width: 1024px) {
.wrapper {
width: 950px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 950px;
}
}
There is a hidden char just after the closing bracket of #media only screen and (min-width: 610px) and (max-width: 950px) just delete it
I have a media query written but it breaks at certain point, I am now trying to optimize the query to the following :
#media only screen and (max-width: 1366px) and (min-width: 1280px) {
}
#media only screen and (max-width: 1280px) and (min-width: 1024px) {
}
#media only screen and (max-width: 1024px) and (min-width: 768px) {
}
#media only screen and (max-width: 768px) and (min-width: 640px) {
}
#media only screen and (max-width: 640px) and (min-width: 320px) {
}
Here is the one which i am using now
#media only screen and (max-width: 1366px) {
.menuTemplate3
{
margin-top: 3%;
}
.menuTemplate3 a
{
padding: 0 30px;
}
.wrap{
width:95%;
}
.span_of_2 {
padding: 3% 0;
margin: 4% 0;
}
.menu li {
margin: 6px 16px;
}
}
#media only screen and (max-width: 1280px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 25px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 6px 12px;
}
.booking_room h4 {
font-size: 1.2em;
}
.booking_room p {
font-size: 0.8125em;
}
.f_nav li {
margin-left: 10px;
}
}
#media only screen and (max-width: 1024px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 17px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 10px 8px;
}
.menu li a {
font-size: 0.8725em;
}
.reservation ul li.span1_of_3 {
width: 14.33333%;
margin-left: 15px;
}
.f_nav li a {
padding: 0 0px;
}
.grid1_of_3 {
float: left;
width: 100% !important;
margin-left: 0%;
}
}
#media only screen and (max-width: 768px) {
.menuTemplate3
{
margin-top: -3% !important;
}
.menuTemplate3 a
{
padding: 0 9px !important;
}
.wrap{
width:95%;
}
.row .grid_3 {
float: right;
width: 38.333333% !important;
}
.menu {
display: none;
}
.logo img
{ margin-left: -14% !important; }
.h_right {
width: 100%;
float: none;
}
.row {
width: 70% !important;
}
.top-nav {
display: block;
margin: 10px 0;
z-index: 999;
position: relative;
}
.nav a{
display: block;
}
.reservation ul li {
float: none;
display: inline-block;
}
.booking_room {
float: none;
width: 98%;
}
.reservation {
float: none;
width: 98%;
}
.b_room {
display: inline-block;
}
.grid1_of_3 h4 a {
font-size: 1.4em;
}
.copy {
float: none;
text-align:center;
}
.f_nav {
float: none;
text-align:center;
margin-top: 20px;
}
.soc_icons {
text-align: center;
margin: 20px 0;
}
.content {
float: none;
width: 100%;
margin-right: 0%;
}
.sidebar {
float: none;
width: 100%;
padding-left: 0%;
border-left: none;
}
.sidebar h4 {
margin: 4% 0 4%;
}
.sel_room {
float: none;
width: 100%;
}
.sel_room.left {
margin-left: 0%;
}
.service_list li {
width: 48.3333%;
margin-bottom:4%;
}
.service_list li:nth-child(3){
margin-left: 0;
}
.reservation h5 {
margin: 10px 0;
}
}
#media only screen and (max-width: 640px){
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 8px;
}
.wrap{
width:95%;
}
.logo{
width: 20%;
}
.h_right{
width:100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation ul li.span1_of_1 {
width: 100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.book_date input[type="text"] {
width: 96% !important;
}
.reservation ul li.left {
margin-left: 0px;
}
.reservation ul li.span1_of_2 {
width: 49.33333%;
}
.reservation ul li.span1_of_3 {
width: 47.33333%;
margin-left: 10px;
}
.grid1_of_3 {
float: left;
width: 100%;
margin-left: 0%;
}
.grid1_of_3 h4 a {
margin: 2% 0;
}
.grid1_of_3 img{
margin-top:4%;
width: 10%;
}
.online_reservation {
margin-top: -30px;
}
.reservation ul li.span1_of_2 {
width: 48.33333%;
}
.res_btn form input[type="submit"] {
width: 50% !important;
padding: 10px;
}
.contact_left {
float: none;
margin-right: 0%;
width: 100%;
}
.contact_right {
float: none;
width: 100%;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
#media only screen and (max-width: 530px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 32.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.online_reservation {
margin-top: 0px;
}
.date_btn {
margin: 0 0 20px;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
#media only screen and (max-width: 320px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 38.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation {
padding: 10px;
width: 97%;
}
.booking_room {
width: 97%;
padding: 10px;
}
.hide{
display: none;
}
.reservation ul li.span1_of_2 {
width: 100%;
}
.reservation ul li.span1_of_3 {
width: 100%;
margin-left: 0px;
}
.book_date input[type="text"] {
width: 93% !important;
}
.soc_icons ul li {
margin-left: 0px;
}
.grids_of_img {
float: none;
width: 100%;
}
.grids_of_para {
float: none;
width: 100%;
margin-left: 0%;
}
.span2_of_1 {
float: none;
width: 100%;
margin-left: 0%;
}
.res_btn form input[type="submit"] {
width: 60% !important;
padding: 10px;
}
.service_list li {
float:none;
margin-left:0;
width: 100%;
margin-bottom: 4%;
}
.contact-form input[type="text"], .contact-form textarea {
width: 93% !important;
}
.contact-form input[type="submit"] {
padding: 10px;
width: 50% !important;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
Can anybody help me with the use the optimized media query? I am confused to place the classes.
you should use max-width and min-width both for media query like this is example
You'll want to use both min and max widths to optimize:
#media (min-width: 1281px) and (max-width: 1366px) {
}
#media (min-width: 1025px) and (max-width: 1280px) {
}
#media (min-width: 769px) and (max-width: 1024px) {
}
#media (min-width: 641px) and (max-width: 768px) {
}
#media (min-width: 321px) and (max-width: 640px){
}
#media (min-width: 1px) and (max-width: 320px) {
}