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:
}
}
Related
Below is a CSS class used to render a div with some links on one of the pages. I want to hide the div in mobile view(Mobile and tablets) and display only in desktop browsers. I am using SCSS.
What changes should I make to the CSS class?
.ps-widget__content {
#extend %list-reset;
ul {
border: 1px solid #d1d1d1;
li {
border-bottom: 1px solid #d1d1d1;
a {
display: block;
padding: 15px 20px;
line-height: 20px;
font-size: 16px;
font-weight: 500;
color: $color-heading;
text-transform: capitalize;
i {
margin-right: 10px;
}
&:hover {
background-color: $color-1st;
color: #fff;
}
}
&:last-child {
border-bottom: none;
}
&.active {
background-color: $color-1st;
a {
color: #fff;
}
}
}
}
}
You need to use media queries that that compiled by SCSS into following CSS out put or similar.
/* for desktop start */
div {
background-color: green;
}
/* for desktop end */
/* for tablet start */
#media screen and (max-width: 992px) {
div {
background-color: blue;
}
}
/* for tablet end */
/* for mobil start */
#media screen and (max-width: 600px) {
div {
background-color: yellow;
}
}
/* for mobile end */
<div>css automaticaly adjusts rules as view changes</div>
Why don't Sass respect the order of CSS property using nested media query?
Input Sass:
margin-top: 3px appears after the media query.
.myContainer {
margin: 1px;
#media only screen and (min-width: 768) {
margin: 2px;
};
margin-top: 3px;
}
Output CSS:
margin-top: 3px now appears before the media query.
.myContainer {
margin: 1px;
margin-top: 3px;
}
#media only screen and (min-width: 768) {
.myContainer {
margin: 2px;
}
}
In this example, you can see that the position of margin-top:3px is changed.
How could this happen and is it expected?
It is the expected result. Otherwise, it will have to create two separate classes like in the second snippet below. This wouldn't make sense. Try this:
.myContainer {
margin: 1px;
#media only screen and (min-width: 768px) {
margin: 2px;
};
& {
margin-top: 3px;
}
}
Output:
.myContainer {
margin: 1px;
}
#media only screen and (min-width: 768px) {
.myContainer {
margin: 2px;
}
}
.myContainer {
margin-top: 3px;
}
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
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 trying to add full responsiveness to my website. But, for some reason, it won't read parts below 980px of width. Here's my CSS:
#media screen and (max-width:1029px){
h1{
font-size: 75px;
}
h2{
font-size: 25px;
}
}
#media screen and (max-width:980px){
h1{
font-size: 70px;
}
h2{
font-size: 20px;
}
}
#media screen and (max-width:954px){
h1{
font-size: 65px;
}
h2{
font-size: 15px;
}
}
The 980px part is the last that can be read, if I change it to 979px it stops reading it, as if it wasn't there. !important doesn't change anything. What can I do? Why is there a magical barrier of 980px?
Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element
I think you should realigned your media, it will be work for you may be.
I make a fiddle and it's working as you want with media query
working fiddle
#media screen and (max-width:954px) {
h1 {
font-size: 65px;
}
h2 {
font-size: 15px;
}
}
#media screen and (max-width:1029px) {
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
#media screen and (max-width:980px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 20px;
}
}
}