SCSS #media compile error - css

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

Related

White space at right of page

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

Parse error CSS valid

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) { ...

Responsive Div Width

I `want to make several 'blocks' of text go from this:
|1| |2| |3| |4| |5| |6|
When viewed on a screen wider than a tablet, to be responsive according to the smaller screen size, like this:
On tablet:
| 1 | | 2 | | 3 |
| 4 | | 5 | | 6 |
On mobile:
|1|
|2|
|3|
|4|
|5|
|6|
Here is the weblink to the page:
create.qublu.com/rates
The full width of the page is 980px. What I need is for each div to have a responsive width according to the screen size viewed and to be centered on the screen.
As you will see on the page, there are four toggle buttons. Level 1, Level 2, Level 3 and Level 4. Level 2 works absolutely fine and perfect. But all the blocks on Level 1 just aren't lining up when viewed on large screens. Instead, the blocks are displaying 3 blocks x 2 rows. Very frustrating!
This is the CSS code I am using:
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-1 {
width: 8.33%;
float: left;
}
#media (min-width: 321px) {
.col-sm-1 {
width: 8.33%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-1 {
width: 8.33%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-1 {
width: 8.33%;
float: left;
}
}
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-2 {
width: 16.66%;
float: left;
}
#media (min-width: 321px) {
.col-sm-2 {
width: 16.66%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-2 {
width: 16.66%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-2 {
width: 16.66%;
float: left;
}
}
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-3 {
width: 25%;
float: left;
}
#media (min-width: 321px) {
.col-sm-3 {
width: 25%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-3 {
width: 25%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-3 {
width: 25%;
float: left;
}
}
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-4 {
width: 33.33%;
float: left;
}
#media (min-width: 321px) {
.col-sm-4 {
width: 33.33%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-4 {
width: 33.33%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-4 {
width: 33.33%;
float: left;
}
}
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-5 {
width: 41.66%;
float: left;
}
#media (min-width: 321px) {
.col-sm-5 {
width: 41.66%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-5 {
width: 41.66%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-5 {
width: 41.66%;
float: left;
}
}
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-6 {
width: 50%;
float: left;
}
#media (min-width: 321px) {
.col-sm-6 {
width: 50%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-6 {
width: 50%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-6 {
width: 50%;
float: left;
}
}
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-7 {
width: 58.47%;
float: left;
}
#media (min-width: 321px) {
.col-sm-7 {
width: 58.47%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-7 {
width: 58.47%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-7 {
width: 58.47%;
float: left;
}
}
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-8 {
width: 66.66%;
float: left;
}
#media (min-width: 321px) {
.col-sm-8 {
width: 66.66%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-8 {
width: 66.66%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-8 {
width: 66.66%;
float: left;
}
}
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-9 {
width: 75%;
float: left;
}
#media (min-width: 321px) {
.col-sm-9 {
width: 75%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-9 {
width: 75%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-9 {
width: 75%;
float: left;
}
}
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-10 {
width: 83.33%;
float: left;
}
#media (min-width: 321px) {
.col-sm-10 {
width: 83.33%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-10 {
width: 83.33%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-10 {
width: 83.33%;
float: left;
}
}
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-11 {
width: 91.74%;
float: left;
}
#media (min-width: 321px) {
.col-sm-11 {
width: 91.74%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-11 {
width: 91.74%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-11 {
width: 91.74%;
float: left;
}
}
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-12 {
width: 99%;
float: left;
}
#media (min-width: 321px) {
.col-sm-12 {
width: 99%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-12 {
width: 99%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-12 {
width: 99%;
float: left;
}
}
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 321px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-15 {
width: 20%;
float: left;
}
}

Have a look here:
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
To have 6 columns in one row you can use col-XX-2 - where XX is the screen size abbreviation
In your example "col-md-2" used as class for your level-1 divs will result in:
|1| |2| |3| |4| |5| |6|

Bootstrap : Custom Media queries

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
}

Images are squashed on zoom

I have a grid with 8 images. Width wise I've made them pretty responsive.
.gallery .item {
width: 33%;
height: 368px;
float: left;
}
#media screen and (max-width: 1650px) {
.main-content {
width: 55.66666667%;
}
.gallery .item {
width: 33%;
height: 330px;
}
}
#media screen and (max-width: 1540px) {
.gallery .item {
width: 33%;
height: 290px;
}
}
#media screen and (max-width: 1450px) {
.main-content {
width: 50.66666667%;
}
.gallery .item {
width: 33%;
height: 250px;
}
}
#media screen and (max-width: 1315px) {
.main-content {
width: 45.66666667%;
}
.gallery .item {
width: 33%;
height: 210px;
}
}
#media screen and (max-width: 1200px) {
.main-content {
width: 75%;
}
.gallery .item {
width: 33%;
height: 260px;
}
}
#media screen and (max-width: 1000px) {
.main-content {
width: 100%;
position: relative;
}
.gallery .item {
width: 33%;
height: 290px;
}
}
#media screen and (max-width: 830px) {
.gallery .item {
width: 33%;
height: 250px;
}
}
#media screen and (max-width: 650px) {
.gallery .item {
width: 33%;
height: 180px;
}
}
#media screen and (max-width: 650px) {
.gallery .item {
width: 33%;
height: 180px;
}
}
#media screen and (max-width: 560px) {
.gallery .item {
width: 33%;
height: 175px;
}
}
#media screen and (max-width: 500px) {
.gallery .item {
width: 100%;
height: 410px;
}
}
#media screen and (max-width: 380px) {
.gallery .item {
width: 100%;
height: 350px;
}
}
But when the theme is zoomed out, it doesn't look so great. In my case I require it to look at-least OK.
http://screencast.com/t/GlYN75pU
Here is a preview of the site.This is an actual preview, not a screenshot:
https://dl.dropboxusercontent.com/u/54191672/theme/index.html
How can I fix the images from being squashed when zooming out?

You're constraining width and height, that distorts the images aspect ratio as the width changes but the height does not.
In order to maintain the correct aspect ratio you must only constrain one of those parameters. Most developers constrain width because devices have a physical maximum viewing width, but can have an infinite vertical viewing height through scrolling.
For example:
#media screen and (max-width: 1650px) {
.main-content {
width: 55.66666667%;
}
.gallery .item {
width: 33%;
/* or height: auto; */
height: 100%;
}
}

Resources