I am new to css and i want to check for page orientation while printing I wrote this code but it's not working
#media print {
/* if the page orientation is landscape */
#media (orientation: landscape) {
.card {
background-color: 'green';
}
}
/* else if the page orientation is portrait*/
#media (orientation: portrait) {
.card {
background-color: 'yellow';
}
}
}
Related
Recently I am trying to use sass to create a mixin/function that help me with my responsive design, but I got stuck on a problem for the past three days and I have tried many different kinds of approach but nothing works.
The problem I am facing is when sass compiled, it outputs something like this, with one style per selector, which I don't want:
#media only screen and (min-width: 1920px) {
h1 {
font-size: 4rem;
}
}
#media only screen and (min-width: 2560px) {
h1 {
font-size: 6rem;
}
}
#media only screen and (min-width: 3840px) {
h1 {
font-size: 7rem;
}
}
#media only screen and (min-width: 1920px) {
h1 {
margin-top: 0.8rem;
}
}
#media only screen and (min-width: 2560px) {
h1 {
margin-top: 1rem;
}
}
#media only screen and (min-width: 3840px) {
h1 {
margin-top: 1.8rem;
}
}
I want the output to be like this:
#media only screen and (min-width: 1920px) {
h1 {
font-size: 4rem;
margin-top: 0.8rem;
}
}
#media only screen and (min-width: 2560px) {
h1 {
font-size: 6rem;
margin-top: 1rem;
}
}
#media only screen and (min-width: 3840px) {
h1 {
font-size: 7rem;
margin-top: 1.8rem;
}
}
This is my Sass file:
// function
#function size-number($base-size, $new-size) {
#if $new-size != 0 {
#return $new-size;
} #else {
#return $base-size;
}
}
// mixin
#mixin break-points-size ($properties) {
$PROPERTIES: $properties;
#each $PROPERTY-KEY, $PROPERTY-VALUE in $PROPERTIES {
$SIZE-NUMBERS: map-get($PROPERTY-VALUE, "size" );
$BREAK-POINTS: (
"screen1080": (
"break-point": "1920px",
"base-size": size-number(1,nth($SIZE-NUMBERS, 1))
),
"screen1440": (
"break-point": "2560px",
"base-size": size-number(2,nth($SIZE-NUMBERS, 2))
),
"screen2160": (
"break-point": "3840px",
"base-size": size-number(3,nth($SIZE-NUMBERS, 3))
)
);
$INDIV-PROPERTY-KEY: $PROPERTY-KEY;
$VALUE-NUMBERS: map-get($PROPERTY-VALUE, "value" );
#each $BREAK-POINT-KEY, $BREAK-POINT-VALUE in $BREAK-POINTS {
$INDIV-BREAK-POINT: map-get($BREAK-POINT-VALUE, "break-point");
$INDIV-BASE-SIZE: map-get($BREAK-POINT-VALUE, "base-size");
#media only screen and (min-width:$INDIV-BREAK-POINT) {
#{$INDIV-PROPERTY-KEY}: $VALUE-NUMBERS * $INDIV-BASE-SIZE;
}
}
}
};
*{
margin:0;
padding:0;
}
h1{
#include break-points-size(("font-size":("value": 2rem,"size": (2,3,3.5)),"margin-top":("value": 1rem,"size": (0.8,1,1.8))));
}
I just can't find which part I am doing wrong.
Here is a mixin for breakpoints you may find useful. It solves the problem of having multiple copies of the same media query for every different property.
#mixin breakpoint($map) {
$query: '';
#if map-has-key($map, media) {$query: append($query, '#{map-get($map, media)} and');}
#if map-has-key($map, min-width) {$query: append($query, '(min-width: #{map-get($map, min-width)})');}
#if map-has-key($map, min-width) and map-has-key($map, max-width) {$query: append($query, "and");}
#if map-has-key($map, max-width) {$query: append($query, '(max-width: #{map-get($map, max-width)})');}
#media #{$query} {#content;}
}
Use it like this:
h1 {
font-size: 20px;
color: #000;
#include breakpoint((min-width: 860px)) {
some-property: someValue;
some-other-property: soneValue;
}
}
p {
margin: 0;
#include breakpoint((min-width: 860px, max-width: 1000px)) {
some-property: someValue;
}
}
I wrote this mixin and I'm really not sure why is it not working as intended.
#mixin responsive($breakpoint){
#if $breakpoint == xs {
#media only screen and (max-width:35.99875em ) {
#content
}
}
#if $breakpoint == sm {
#media only screen and (min-width:35.99876em) and (max-width:47.99875em) {
#content
}
}
#if $breakpoint == md {
#media only screen and (min-width:47.99876em) and (max-width:61.99875em) {
#content
}
}
#if $breakpoint == lg {
#media only screen and (min-width:61.99876em) and (max-width:74.99875em) {
#content
}
}
#if $breakpoint == xl {
#media only screen and (min-width:74.99876em) and (max-width:85.37375em) {
#content
}
}
#if $breakpoint == xxl {
#media only screen and (min-width:85.37376em) {
#content
}
}
}
Here everything seems fine, but in VSC some "ems" are not highlighted and those "ems" that are not highlighted are not working correctly. (see image 1)
image 1
When I compile sass, it is not showing any errors, but the "ems" remain grey even in CSS code.
Below code is example usage of mixin.
body {
#include responsive(xxl){
background: rgb(147, 48, 228);
}
#include responsive(xl){
background: rgb(44, 255, 150);
}
#include responsive(lg){
background: rgb(255, 245, 100);
}
#include responsive(md){
background: rgb(255, 146, 146);
}
#include responsive(sm){
background: rgb(145, 145, 145);
}
#include responsive(xs){
background: #000;
}
}
Below code is compiled sass in CSS file.
#media only screen and (min-width: 85.37376em) {
body {
background: #9330e4; } }
#media only screen and (min-width: 74.99876em) and (max-width: 85.37375em) {
body {
background: #2cff96; } }
#media only screen and (min-width: 61.99876em) and (max-width: 74.99875em) {
body {
background: #fff564; } }
#media only screen and (min-width: 47.99876em) and (max-width: 61.99875em) {
body {
background: #ff9292; } }
#media only screen and (min-width: 35.99876em) and (max-width: 47.99875em) {
body {
background: #919191; } }
#media only screen and (max-width: 35.99875em) {
body {
background: #000; } }
image 2
At first I thought those "em" highlighting is just in VSC , but when i open browser and look in debugger I get the same result, still those "ems" are not highlighted as intended. (see image 3)
image 3
Now when i comment "ems" that are not highlighted and just rewrite the same thing in CSS file, it works without any problems. (see image 4)
image 4
Here is an example with sass compiled CSS file. (see gif 1)
gif 1
And here is an example with same breakpoints and values just written in CSS from start. (see gif 2)
gif 2
Looking at the posted question, it seems that those "ems" that are not working, are not highlighted in stack overflow as well.
I forgot to mention that rewriting the same breakpoint fixes the issue, but can anyone explain why was this happening at first place?
You have (Pop Directional Formatting) characters in your SASS code between some of the numeric values and "em". Values such 85.37376em are actually in your code as 85.37376em .
Please inspect the generate CSS in Chrome's dev tools. I attached a screenshot.
Syntax highlighting in VSCode is further corrected when you add semicolons after each of the content rules: #content;
I'm having some issues on apply media queries (for responsive behavior) on an app that it's using the following component's architecture
base components: It uses default encapsulation, there is where external plugins are used, at the moment we're applying, for some cases, PrimeNG external module. The idea is to move these base components to other apps. These are integrated in its own shared module.
branding components: It reuses base components, apply custom styles & translate texts, do some specific stuff and it uses native encapsulation (in order to differentiate from base components) but it doesn't apply business logic. These are integrated in its own branding module that imports shared module.
business components: It reuses branding components and apply own business logic here (when it's used in several views). These are integrated in its own business module that imports branding module. These components implements default angular encapsulation mode.
Then we have views, that are integrated in its own module & imports business module. It will use branding and or business components, here we're facing some issues regarding to css media queries. These views uses default angular encapsulation mode.
The specific case is that in which we're trying to customize for a specific view an input-field in order to behave correctly for responsive cases (mobile, tablets & desktop on different orientations). In order to do so we're using external plugin angular flex layout (beta 7)
This input-field exist on base component but we're bringing it's branding case. What we want is to change its default width/height set on branding in order to adapt to the div container which will encapsulate it.
This is what we've done so far:
specific view's scss:
// MEDIA QUERIES
:host ::ng-deep {
#media screen and (min-width: 300px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width: 95%;
}
}
#media screen and (min-width: 300px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.625);
}
}
#media screen and (min-width: 480px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.9);
}
}
#media screen and (min-width: 640px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2);
height:(16px * 1.6);
}
}
#media screen and (min-width: 640px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.68);
height:(16px * 1.6);
}
}
#media screen and (min-width: 768px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.3);
height:(16px * 1.6);
}
}
#media screen and (min-width: 768px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.5);
height:(16px * 1.6);
}
}
#media screen and (min-width: 900px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.5);
height:(16px * 1.625);
}
}
#media screen and (min-width: 900px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 1.875);
height:(16px * 1.625);
}
}
#media screen and (min-width: 1200px) and (orientation: portrait) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 3.75);
height:(16px * 1.625);
}
}
#media screen and (min-width: 1200px) and (orientation: landscape) {
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
width:(80px * 2.5);
height:(16px * 1.625);
}
}
}
Previous custom classes exist & are used in branding input-field component in order to change its UX based on different cases.
branding input-field component template file:
<sh-input-field [id]="id"
[caption]="caption | translate"
[(model)]="userInput"
[placeholder]="placeholder | translate"
[type]="inputType"
[color]="color"
[font-size]="fontsize"
[isDisabled]="!enabled"
[style]="{'width': width,
'height': height}"
[status]="status"
[baseClass]="INPUT_CLASS_ENABLED"
[extendedClass]="extendedClass"
[stateClasses]="{
focusedOn: INPUT_CLASS_EDITING,
enabledOn: INPUT_CLASS_ENABLED,
enabledOff: INPUT_CLASS_DISABLED,
valueChanged: INPUT_CLASS_CHANGED
}"
[passwordWeakCaption]="passwordWeakCaption"
[passwordMediumCaption]="passwordMediumCaption"
[passwordStrongCaption]="passwordStrongCaption"
[isPasswordFeedbackShown]="isPasswordFeedbackShown">
</sh-input-field>
branding input-field component scss file:
/* CAPTION */
.uiElemSideCaptionLeft,
.uiElemSideCaptionRight,
.uiElemSideCaptionDisabled {
position: relative;
display: inline-block;
padding-top: 2px;
text-align: left;
font-size: 14px;
-ms-opacity: 1;
opacity: 1;
color: #333;
}
.uiElemSideCaptionRight {
-ms-opacity: 1;
opacity: 1;
text-align: right;
}
.uiElemSideCaptionDisabled {
-ms-opacity: 0.4;
opacity: 0.4;
}
/* INPUT-FIELD */
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
position: relative;
display: inline-block;
height: 16px;
width: 80px;
padding: 4px;
background-color: #dddddd;
border-width: 1px;
border-color: #979797;
border-style: solid;
font-size: 14px;
text-align: left;
color: rgba(0, 0, 0, 1);
-ms-opacity: 1;
opacity: 1;
}
.inputFieldEditing {
-ms-opacity: 1;
opacity: 1;
background-color: #eee;
height: 14px;
border-width: 2px;
border-color: #F8E71C;
color: rgba(0, 0, 0, 1);
border-style: solid;
}
.inputFieldChanged {
-ms-opacity: 1;
opacity: 1;
background-color: rgba(245, 166, 35, 0.5);
height: 16px;
border-width: 1px;
border-color: #979797;
color: rgba(0, 0, 0, 1);
border-style: solid;
}
.inputFieldDisabled {
-ms-opacity: 0.6;
opacity: 0.6;
height: 16px;
background-color: lightgray;
border-width: 1px;
border-color: #979797;
border-style: solid;
color: rgba(0, 0, 0, 1);
}
branding input-field component definition:
#Component({
selector: 'br-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.scss'],
encapsulation: ViewEncapsulation.Native
})
base input-field component template file:
<div class="sh-input-field-global-container">
<div class="sh-input-field-label-container" *ngIf="caption !== '' && caption !== undefined && caption !== null">
<label [for]="id">{{caption}}</label>
</div>
<div class="sh-input-field-container" [ngClass]="extendedClass">
<input *ngIf="controlType !== 'password'"
[ngClass]="getCssClases('sh-input-field', baseClass)"
[attr.id]="id"
[placeholder]="placeholder"
[disabled]="isDisabled"
(focus)="InvokeFocus($event)"
(blur)="InvokeBlur($event)"
(keyup.enter)="InvokeKeyUpEnterEvent($event)"
(keyup.escape)="InvokeKeyUpEscapeEvent($event)"
[(ngModel)]="model"
[attr.name]="formName"
[maxLength]="length"
[type]="controlType"
[ngStyle]="style"/>
<input *ngIf="controlType === 'password'"
[ngClass]="GetCssClases('sh-input-field', baseClass)"
[attr.id]="id"
[disabled]="isDisabled"
(focus)="InvokeFocus($event)"
(blur)="InvokeBlur($event)"
(keyup.enter)="InvokeKeyUpEnterEvent($event)"
(keyup.escape)="InvokeKeyUpEscapeEvent($event)"
[(ngModel)]="model"
[attr.name]="formName"
[maxLength]="length"
[type]="controlType"
pPassword
[promptLabel]="placeholder"
[weakLabel]="passwordWeakCaption"
[mediumLabel]="passwordMediumCaption"
[strongLabel]="passwordStrongCaption"
[feedback]="isPasswordFeedbackShown"
[ngStyle]="style"/>
</div>
</div>
base input-field component definition:
#Component({
selector: 'sh-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.scss']
})
So what could be wrong here? Are we using :host :ng-deep incorrectly on specific view? We've seen if we apply these media queries directly on branding input-field sass file it works fine (removing :host :ng-deep tag)
Try :host /deep/ instead of :host ::ng-deep as shown below
:host /deep/ {
/*your style goes here*/
}
Or
Use encapsulation: ViewEncapsulation.Noneinstead ofencapsulation: ViewEncapsulation.Native
But, I have to add !important to all properties values set on media queries in order that it makes an effect.
To fix this issue I used on scss as Vikas mentioned in this link.
You can put it in separate file and include it in any file you will use it.
$phone : '(max-width: 480px)';
$phone-landscape : '(max-height: 480px)';
$tablet-portrait: '(max-width: 767px)';
$tablet-landscape: '(min-width: 768px) and (max-width: 979px) and (max-height: 768px)';
$large-desktop: '(min-width: 1200px)';
$non-retina: 'screen and (-webkit-max-device-pixel-ratio: 1)';
$retina: '(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx)';
#mixin respond-to($media) {
#media only screen and #{$media} {
#content;
}
}
and then use call inside declarations:
.bookItem {
max-height: 450px;
min-height: 150px;
padding: 25px;
#include respond-to($phone) {
max-height: 150px;
padding: 15px;
}
}
And it works.
In an effort to better understand the use of Sass mixins I am trying to learn to use them for my media query breakpoints and it only seems to be processing them above and below 37.5em. So, if you look at the SCSS code I have posted below, it will render the styles for mobileonly(below 37.5em on the viewport window) and phablet(above 37.5em on the viewport window), but not for laptop or desktop. When the viewport window is stretched larger it will not change past my $firefly hexidecimal variable I declared. According to Chrome dev tools, the media queries appear to be working, but the #media (min-width: 37.5em) seems to be overwriting the styles still because the styles that I want are crossed out in dev tools. So, even at the full viewport window size,#media (min-width: 37.5em) is the only style being applied. Why would this be?
Here is a jsfiddle of my exact issue.
And, for further clarification, here's my code:
HTML:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/build/main.css">
</head>
<body>
<header>
</header>
</body>
</html>
SCSS:
$azure: #f3f4f4;
$chateau-green: #2bb656;
$firefly: #364141;
$fern: #59cb59;
$pastel-green: #75dd66;
$pigment-green: #0ca750;
#mixin breakpoint($point) {
#if $point == desktop {
#media (min-width: 70em) { #content ; }
}
#else if $point == laptop {
#media (min-width: 64em) { #content ; }
}
#else if $point == tablet {
#media (min-width: 50em) { #content ; }
}
#else if $point == phablet {
#media (min-width: 37.5em) { #content ; }
}
#else if $point == mobileonly {
#media (max-width: 37.5em) { #content ; }
}
}
header {
height: 600px;
width:100%;
#include breakpoint(desktop) {
background-color:$azure;
}
#include breakpoint(laptop) {
background-color:$chateau-green;
}
#include breakpoint(phablet) {
background-color:$firefly;
}
#include breakpoint(mobileonly) {
background-color:$pastel-green;
}
}
EDIT: Added Outputed CSS:
header {
height: 600px;
width: 100%;
}
#media (min-width: 70em) {
header {
background-color: #f3f4f4;
}
}
#media (min-width: 64em) {
header {
background-color: #2bb656;
}
}
#media (min-width: 37.5em) {
header {
background-color: #364141;
}
}
#media (max-width: 37.5em) {
header {
background-color: #75dd66;
}
}
The issue here is that the style written for min-width: 37.5em overwrites the style written for min-width: 64em and similarly for other cases as well. For this, try to set the min-width as well as max-width both, so that the style is specific.
Here is the js fiddle.
This is my HTML code:
<a href="url/RollBearing.html" id="various2">
<img class="rollingbearingdefects" src="img/hotspot.png"
onmouseover="this.src='img/RollingBearingDefects2.png';"
onmouseout="this.src='img/hotspot.png';" /></a>
This is my CSS code:
.rollingbearingdefects{
position:absolute;
margin-left:-22%;
margin-top:30%;
}
#media only screen and (max-width: 768px) {
.rollingbearingdefects {
max-width:3%;
max-height:6%;
position:absolute;
margin-left:-22%;
margin-top:30%;
}
}
.rollingbearingdefects:hover {
margin-left:-35%;
}
#media only screen and (max-width: 768px) {
.rollingbearingdefects:hover {
max-height:6%;
max-width:17%;
}
}