Currently I'm trying to change the padding of my landing page text, so it pushes my smooth scroll button to the bottom of the page. However the queries work up until (min-width: 600px), and they dont change higher.
Mixins Partial
#mixin for-phone-only {
#media (max-width: 599px) {
#content;
}
}
#mixin for-tablet-portrait {
#media (min-width: 600px) {
#content;
}
}
#mixin for-tablet-landscape {
#media (min-width: 899px) {
#content;
}
}
#mixin for-desktop-up {
#media (min-width: 1200px) {
#content;
}
}
Landing Page Partial
.welcomeTitle {
font-family: $landing-font;
font-size: $landing-header-size-l;
text-shadow: 1px 1px 15px #000;
padding-top: 20%;
#include for-phone-only {
font-size: $landing-header-size-sm;
}
}
.welcomeText {
#include for-desktop-up {
padding: 0 20% 21.5% 20%;
font-size: $landing-text-size-l;
}
#include for-tablet-landscape {
padding: 0 20% 20% 20%;
}
#include for-tablet-portrait {
padding: 0 20% 60% 20%;
}
#include for-phone-only {
padding: 0 20% 50% 20%;
}
}
So it applies the tablet portrait query, but when the width goes above 899px, it dose not apply the tablet landscape, or when it goes above 1200px, it dosent apply the desktop query.
Thanks :D
Related
I have the following code both in two CSS tiles with different values (using LESS).
The CSS is linked in link tag in the header. The all.css is positioned before the override.css. The problem is that when I browse the site, I can't see any changes and it only uses the code in the all.css instead of overriding it with the one in override.css.
#subheader h1 {
font-size: 3vw;
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
}
How can I make so that the rules override without using !important?
There is no problem with the LESS compilation and it results in a correct CSS file, this is why I have no idea why it's not working.
You are using completely wrong syntax of writing css #media rule. Follow this w3schools link, the correct syntax should be:
#media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}
The correct code will be:
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
#subheader h1 {
font-size: 3vw;
}
}
#media screen and (min-width: 40em) {
#subheader h1 {
font-size: 3vw;
}
}
/* Large and up */
#media screen and (min-width: 64em) {
#subheader h1 {
font-size: 3vw;
}
}
Try this :
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
I'm looking for a way to generate responsive utility classes in SASS. I had this CSS
.text-left { text-align: left; }
.text-right { text-align: right; }
#media (min-width: 480px) {
.text-left-sm { text-align: left; }
.text-right-sm { text-align: right; }
}
#media (min-width: 800px) {
.text-left-md { text-align: left; }
.text-right-md { text-align: right; }
}
and I would like to add some more, but I don't want to repeat myself. It would be best if SASS could generate all those responsive (media query) variants for me. So far I was able to write a mixin that I could call with suffix param and get what I want
#mixin textalign($suffix: "") {
.text-left#{$suffix} { text-align: left; }
.text-right#{$suffix} { text-align: right; }
}
#include textalign();
#media (min-width: 480px) {
#include textalign("-sm");
}
#media (min-width: 600px) {
#include textalign("-lg");
}
but I would like to go one step further and be able to do something like this
/* Unfortunatelly this doesn't work */
#include generate-responsive() {
.text-left { text-align: left; }
.text-right { text-align: right; }
}
Is there a way to achieve something like this? Having a general purpose mixin that I can use to generate all kind of utility classes?
I don't think you can accomplish your goal when nesting your selector in the #include, but you can do it when nesting the #include inside the selector.
SCSS input:
#mixin generate-responsive() {
// Create a list of sizes and widths
$sizes: (
sm: "480px",
md: "600px",
lg: "800px"
);
// Base style, without a suffix
#content;
// Responsive styles
// Loop over each size
#each $suffix, $width in $sizes {
#media (min-width: $width) {
&-#{$suffix} { #content; }
}
}
}
.text-left {
#include generate-responsive() {
text-align: left;
}
}
// You'll have to include the mixin for every class
.text-right {
#include generate-responsive() {
text-align: right;
}
}
CSS output:
.text-left {
text-align: left;
}
#media (min-width: 480px) {
.text-left-sm {
text-align: left;
}
}
#media (min-width: 600px) {
.text-left-md {
text-align: left;
}
}
#media (min-width: 800px) {
.text-left-lg {
text-align: left;
}
}
.text-right {
text-align: right;
// Etc...
Is it possible to write CSS for that affects a screen only when width is 755.4px - 991.4px?
I've tried the below but it also affects anything larger then #media (min-width: 767px) and (max-width: 768px)
#media (min-width: 755.4px) and (max-width: 991.4px)
#sliderText{
top:90px !important;
width: 85% !important;
}
#sliderText h1{
font-size: 1em !important;
}
}
The problem is, when the text is on a screen with width 755.4px - 991.4px, it goes on 2 lines and then it breaks the layout.
My original code is:
#ajax-content-wrap{
position:relative;
}
#sliderText{
position:absolute;
top:85%;
text-align:center;
margin-left:50px;
width:93%;
z-index:100;
}
#sliderText h1{
font-size: 4em;
font-weight: 600;
color: #31a6c7;
text-shadow: 2px 2px 2px #333;
}
#media (min-width: 767px) and (max-width: 768px) {
#sliderText{
top:90px !important;
width: 85% !important;
}
#sliderText h1{
font-size: 2em !important;
}
}
#media (max-width: 767px) {
#sliderText{
top: 84% !important;
width:75% !important;
//padding-left:50px;
//padding-right:50px;
}
#sliderText h1{
font-size: 1.7em !important;
}
}
You could try to do the following
Anything below 755.3px is small CSS
Anything above 991.4px is big CSS
Anything in the middle of that range is medium CSS
Here's a simplification of what that would look like:
/* Big CSS: Applies to everything unless overwritten */
#sliderText {
top: ;
width:
}
#sliderText h1 {
font-size:
}
/* Small CSS: Applies to small devices */
#media (max-width: 755.3px) {
#sliderText {
top: ;
width:
}
#sliderText h1 {
font-size:
}
}
/* Middle CSS: Applies to Devices in the middle of the range above */
#media (max-width: 991.4px) {
#sliderText {
top: ;
width:
}
#sliderText h1 {
font-size:
}
}
Im working with SCSS and I want to structure the code proberly..
In LESS it wasnt a problem, but would you say it is okay to structure the code like below..
imagine that button has its own file.
#mixin button-basic {
.button {
font-size: 14px;
}
}
#mixin button-max-480 {
.button {
color: red;
}
}
#mixin button-max-767 {
.button {
color: green;
}
}
#mixin button-max-959 {
.button {
color: blue;
}
}
#mixin button-min-960 {
.button {
font-size: 34px;
color: purple;
}
}
#media print, screen {
#include button-basic();
}
in my media-query file.. (imagine having multiple includes within each media Query type.)
#media (min-width: 960px) {
#include button-min-960();
}
#media (max-width: 959px) {
#include button-max-959();
}
#media (max-width: 767px) {
#include button-max-767();
}
#media only screen and (max-width:480px) {
#include button-max-480();
}
You could work with #mixins but I would not recommend this approach because this gets really confusing.
I suggest using modifier classes for each variation and use your media-query inside your declaration.
.button {
&--red {
color: red;
}
&--green {
color: green;
}
&--blue {
color: blue;
}
#media (min-width: 768px) {
font-size: 1.125rem;
}
#media (min-width: 960px) {
font-size: 1.25rem;
}
}
This way you have a really clean code base and can split up each component / module into it's own file.
Is it ok to nest media queries inside an element? If I want to use min-width: 480px in another places there will be huge repetition. Please look at my code example. Or just use the old way? Any idea?
SASS
.navbar {
height: 500px;
width: 500px;
#media screen and (min-width: 480px) {
background-color: lightgreen;
}
}
.items {
padding: 15px;
color: red;
#media screen and (min-width: 480px) {
border: 1px solid black;
}
}
CSS
#media screen and (min-width: 480px) {
.navbar {
background-color: lightgreen;
}
.items {
border: 1px solid black;
}
}
$pc: 1024px; // PC screen size.
$tablet: 720px; // Tablet screen size.
$phone: 320px; // Phone screen size.
#mixin responsive($media) {
#if $media= phone {
#media only screen and (max-width: $tablet - 1) {
#content;
}
}
#else if $media= tablet {
#media only screen and (min-width: $tablet - 1) and (max-width: $pc) {
#content;
}
}
#else if $media= pc {
#media only screen and (min-width: $pc + 1) and (min-width: $pc) {
#content;
}
}
#else if $media= pc_tablet {
#media only screen and (min-width: $tablet - 1) {
#content;
}
}
}
Examples
body {
#include responsive(pc) {
background: red;
}
#include responsive(tablet) {
background: yellow;
}
#include responsive(phone) {
background: green;
}
}