Error with scss code, can't style anything in media queries without "!important". What could be wrong and also everytime I save any scss file other than main.scss it causes an error but when I save the main.scss file then it works fine. Any suggestions? I'm using webpack.
.loading {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.logo {
width: 80%;
}
}
#media screen and (min-width: 8em) and (orientation: landscape) {
.logo {
width: 60% !important;
}
}
#media screen and (min-width: 767px) {
.logo {
width: 40% !important;
}
}
#media screen and (min-width: 1200px) {
.logo {
width: 20% !important;
}
}
The problem seems to be that you are using .logo inside .loading
try to do it like this
.loading {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
width: 80%;
}
This way you should be able to use the media queries without !important.
The nested way has higher complexity than the media query so that's why you had to use !important.
Related
I'm using Scss and came upon something that puzzles me.
Background properties don't carry over into the media queries so I need to rewrite it all and this just seems very repetitive and not DrY at all.
Maybe I'm missing something or overlooking something here
Let's say I have two divs styled the same but different background images.
<div class="section section--dog"><h3>Dog</h3></div>
<div class="section section--cat"><h3>Dog</h3></div>
Now I add my style via SCSS as follow
.section {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
&--dog {
background: url(./images/dog.jpg)
}
&--cat {
background: url(./images/cat.jpg)
}
}
Renders CSS:
.section {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
}
.section--dog {
background: url(./images/dog.jpg)
}
.section--cat {
background: url(./images/cat.jpg)
}
The result is that the background properties don't carry over even though it's applied to the same div.
Then I tried the extend the background properties in SCSS:
.section {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
}
.section--dog {
background: url(../images/dog.jpg);
#extend .section;
}
.section--cat {
background: url(../images/cat.jpg);
#extend .section;
}
Rendered CSS:
.section, .section--dog, .section--cat {
padding: 3rem 2rem;
background-position: top center;
background-size:cover;
background-repeat: no-repeat;
}
.section--dog {
background: url(../images/dog.jpg)
}
.section--cat {
background: url(../images/cat.jpg)
}
The result is that the background properties still don't carry over even though it's applied to each of the specific divs.
I then created a mixin to add in which solved part of the problem, but there was still an issue - The SCSS:
#mixin bg-properties {
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.section {
padding: 3rem 2rem;
}
.section--dog {
background: url(../images/dog.jpg);
#include bg-properties;
}
.section--cat {
background: url(../images/cat.jpg);
#include bg-properties;
}
Rendered CSS:
.section {
padding: 3rem 2rem;
}
.section--dog {
background: url("../images/dog.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.section--cat {
background: url("../images/cat.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
This works fine until I add in the Media Query to use a different size image. Then the properties don't carry over again.
SCSS:
#mixin bg-properties {
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.section {
padding: 3rem 2rem;
}
.section--dog {
background: url(../images/mobile/dog.jpg);
#include bg-properties;
#media screen and (min-width:768px) {
background: url(../images/desktop/dog.jpg);
}
}
.section--cat {
background: url(../images/mobile/cat.jpg);
#include bg-properties;
#media screen and (min-width:768px) {
background: url(../images/desktop/cat.jpg);
}
}
Rendered CSS:
.section {
padding: 3rem 2rem;
}
.section--photography {
background: url("../images/mobile/cat.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
#media screen and (min-width: 768px) {
.section--photography {
background: url("../images/desktop/cat.jpg");
}
}
.section--design {
background: url("../images/mobile/dog.jpg");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
#media screen and (min-width: 768px) {
.section--design {
background: url("../images/desktop/dog.jpg");
}
}
So the above works fine for mobile but once you hit the media query it discards the background properties again. the only resolution was to add the mixin inside the media queries as well. All this is fine but doesn't feel very DRY.
Feedback would be greatly appreciated
I want to remove the padding on item inside ion-slide. By setting the background color, I've found that it must come from there, as shown in the pic:
I want to remove the green zone.
<ion-content >
<ion-slides style="background-color: #976914d0" >
<ion-slide *ngFor="let channel of channels" style="background-color: #0c8831d0">
<div class="flex-container">
<br/>
<h1 class="title-top"> {{channel.name}} </h1>
...
and what i've tried with scss so far:
.ios, .md {
page-home {
ion-slide {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
.flex-container {
flex-basis:100% !important;
overflow: auto;
height: 100% !important;
background-color: #3498db;
//height: 100%;
//display: flex; /* or inline-flex */
flex:1;
//align-content: space-between;
justify-content: space-around;
flex-direction: column;
//flex-grow: 1;
border: solid 5px #000000 ;
}
[EDIT] I should have mentioned that in flex-container I can set height: 600px; and it makes larger item, but it is not portable. and height: 100% does nothing.
In flexbox the value should be flex-start for the align-self property.
Given your current configuration, start with this:
.flex-container {
align-self: flex-start;
}
I found some work around but it is not perfect. It remove the space on top, but I'm still unable to set container size auto adjustable to windows... I overwrite some config on ion-slide. I saw another class that is nested in ion-slide; swiper-slide. I have not tried all of it config...
ion-slides {
height: auto !important;
}
.flex-container {
//height: 100% !important;
display: flex;
flex-direction: column;
height: 500px;
justify-content: space-between;
border: solid 5px #000000 ;
}
[EDIT]finally got the right answer, add:
.scroll-content {
display: flex;
flex-direction: column;
ion-slides {
display: flex;
}
}
.slide-zoom {
height: 100%
}
worked for me. Have a look at the Ionic Demo Source:
https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/slides/basic
Images for mobile form factors are also getting downloaded in the browser when i use the desktop version. Is there any way i can load those images only in mobile form factor and not in desktop as i have different images for desktop.
Note:
I am building an adaptive design, not responsive. Hence it is fine
only those respective images of those form factors alone gets
downloaded.
Example code:
1. For mobile:
#media only screen and (max-device-width: 480px) {
div#wrapper {
background-image: url(media-queries-iphone5.jpg);
width: 400px;
}
div#header {
background-image: url(media-queries-iphone6.jpg);
height: 93px;
position: relative;
}
div#header h1 {
background-image: url(media-queries-iphone6s.jpg);
font-size: 140%;
}
#content {
background-image: url(media-queries-iphone5s.jpg);
float: none;
width: 100%;
}
#navigation {
background-image: url(media-queries-iphonese.jpg);
float:none;
width: auto;
}
}
2. For desktop:
#media only screen and (min-width: 768px) {
div#wrapper {
background-image: url(media-queries-samsung.jpg);
width: 400px;
}
div#header {
background-image: url(media-queries-dell.jpg);
height: 93px;
position: relative;
}
div#header h1 {
background-image: url(media-queries-hp.jpg);
font-size: 140%;
}
#content {
background-image: url(media-queries-macpro.jpg);
float: none;
width: 100%;
}
#navigation {
background-image: url(media-queries-mac.jpg);
float:none;
width: auto;
}
}
Does anyone know how to show the 'mmenu icon-bar' at the right side of the page in stead of the left?
body {
overflow-x: hidden; }
.mm-page {
background: inherit;
min-height: 100vh;
position: relative;
-webkit-transform: translate(60px);
transform: translate(60px);
padding-right: 60px;
}
.mm-menu:first-child, .mm-menu.mm-current {
display: block; }
Try moving the padding from right to left and the translate from left to right:
.mm-page {
-webkit-transform: translate(-60px);
transform: translate(-60px);
padding-left: 60px;
}
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).