I have a hero class where I have:
.hero{padding: 90px 30px}
I have this, but when there is a bigger screen, I want to remove the padding completely so I tried:
#media screen and (min-width: 1150px) {
.hero{
padding: none !important;
}
}
I tried this but it came back with "invalid property value". Any suggestions?
You could use padding:0. Your attempt is not working because none is not a valid padding. A valid one is either a <length> or a <percentage>.
#media screen and (min-width: 1150px) {
.hero {
padding: 0;
}
}
Related
I am editing the CSS of a DataTable plugin, When my window is at 839px or less I want my search filter to be on the left and when it's 840px or bigger I want it on the far right.
If I use only the text-align rule I will get an invalid value when the media query kicks in.
I managed to pull it off using, text-align to pull it on way when it's 839px or less and Flex when it's 840px or more, just wandering if I can do it cleaner.
Code I used.
.dataTables_filter {
text-align: right !important;
}
#media only screen and (max-width: 839px) {
.dataTables_filter{
display: flex;
justify-content: flex-start;
}
Fixed - Thanks DreamTek
Used the following code to make it more uniform and clean.
.dataTables_filter {
float: right;
}
#media only screen and (max-width: 839px) {
.dataTables_filter {
float: left !important;
}
}
If it is the position of .dataTables_filter that you want to edit then you need to adjust the float property used in datatables.
.dataTables_filter {
float:right;
}
#media only screen and (max-width: 839px) {
.dataTables_filter{
float:left;
}
}
From https://www.datatables.net/
I was working on a project and I encountered a problem.
I'll show you with the following demonstration example:
This is css code:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 600px) {
div {
background: blue;
}
}
#media only screen and (min-width: 601px) and (max-width: 1000px) {
div {
background: green;
}
}
#media only screen and (min-width: 1001px) {
div {
background: red;
}
}
So my div should be:
blue from 0px to 600px
green from 601px to 1000px
red from 1001px to ...
Instead it is:
blue from 0px to 600px
white at 601px
green from 602px to 1000px
white at 1001px
red from 1002px to ...
Why? It seems that (min-width:) is not inclusive.
So I tried:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 600px) {
div {
background: blue;
}
}
#media only screen and (min-width: 600px) and (max-width: 1000px) {
div {
background: green;
}
}
#media only screen and (min-width: 1000px) {
div {
background: red;
}
}
So my div should be:
blue from 0px to 600px
green from 601px to 1000px
red from 1001px to ...
Instead it is:
blue from 0px to 599px
green from 600px to 999px
red from 1000px to ...
Why? Now seems that (min-width:) is inclusive.
But If I try:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 601px) {
div {
background: blue;
}
}
#media only screen and (min-width: 601px) and (max-width: 1001px) {
div {
background: green;
}
}
#media only screen and (min-width: 1001px) {
div {
background: red;
}
}
Seems that (min-width:) is not inclusive again:
blue from 0px to 601px
green from 602px to 1001px
red from 1002px to ...
I am confused.
Both 'min' and 'max' prefixes are inclusive. Quoting the spec:
Most media features accept optional ‘min-’ or ‘max-’ prefixes to
express "greater or equal to" and "smaller or equal to" constraints.
The problem is a bit different: while you expect pixel dimensions to be integer, it's not always like that. This article describes the problem in quite a bit of detail:
You might think "Half a pixel? That's not possible", and for the most
part it's not. But if you use Ctrl+ or Ctrl- to change your browser
zoom then you'll often end up with non-integer viewport sizes, and
that non-integer viewport size can be used by the browser when working
out which media queries to apply to the page [...]
On Windows 7 and higher, there is a zoom level used by the operating
system for things like text and icons, and on larger screens (1920px
wide for example) this will automatically be set to a 125% zoom. But IE, Edge and Firefox all inherit this 125% value in their own way and end up applying it as browser zoom, creating the conditions for this bug to appear by default on most Windows machines with decent resolution screens in the past five or
six years.
Check the discussion opened on the similar issue in Bootstrap. A telling quote:
Chrome does not report decimal viewport widths even when zoomed, I
assume it rounds the values when applying media queries.
Quite convenient, I suppose.
In short, I'd drop either max-width or min-width here and go with overlapping rules, letting the latter rule to be a decider.
I am trying to mix both min width and max width media queries like so:
#media only screen and (max-width: 768px) {
.navibar li a {
font-size: 8px !important;
}
}
#media only screen and (max-width: 1300px) {
.navibar li a {
font-size: 2px !important;
}
}
#media only screen and (min-width: 1301px) {
.navibar li a {
font-size: 1rem !important;
}
}
When hitting the 1300px the font size changes to 2px, but never hits the 768px media query. Why is this?
Codepen
I think why not? You specific the .navibar li a when max-width: 1300px is 2px, so form 0 to 1300px, they will have that value = 2px.
And since you write the rule of max-width: 1300px after the rule of max-width: 768px, so it always be 2px too even if you have less than 768px width. You should relocate the rule of max-width: 768px after the 1300 one and it will work just fine.
And a side note, try not use !important in your code, it a bad practice. Find other way(s) to override the rule(s), !important should only use to override inline style, which is a bad practice too if you write style like that.
My website is https://salesportalasia-testsite.azurewebsites.net
When view using mobile there is white space at header.
I have check the margin-top code in css but not success.
Can someone please help me solve this problem...
You have a inlined style padding-top: 211px on div with id="page". Remove it, and this white space will disappear.
Assign padding-top:0px !important; in mediaqueries
#media (max-width: 767px){
.wrapper {
padding-top:0px !important;
}
}
If you inspect the page in mobile view, you will see that some inline styling is being applied to <div id="page" style="padding-top: 160px"></div>.
It looks like it is being set in custom.min.js in the setNavigationOffset function.
I hope that helps.
I noticed you have padding-top:160px in top.
element.style {
padding-top: 160px;
}
In the page it looks like hardcoded inside theme page,
Its possible you have different padding-top in different mobile devices so please check that and resolve it according the device. That will helpful.
Use this css code for removing the padding top which results in the white space.
#page{
padding-top:0px !important;
}
Problem you are facing due to multiple positioning of navigation element.
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative!important;
}
This above class overwrite your fixed position class value.
.navigation-fixed-top .navigation {
top: 0;
position: fixed; /* This not work
bottom: inherit;
}
Here if you want to overcome. Just simply remove relative class
TO REMOVE
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative!important;
}
Otherwise if you want to use above class. Remove ! important keyword.
Change like this.
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative;
}
So navigation element automatically get the fixed class value based on priority..
Hops it helps.!
I'm trying to understand CSS a bit and I'm currently somewhat stuck with #media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 10px;
background-color: brown;
}
#media screen and (max-width: 9999px) {
section {
background-color: red;
}
}
#media screen and (max-width: 1000px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Just using a simple
<section>
bla
</section>
HTML code. Here's a w3schools tryit link since you can easily resize your viewport.
https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6
However, it does not work like I'd want it to.
For the yellow background (< 500px), it stays yellow until 500 included.
For the blue background (>= 500px && < 1000px), it stays blue until 1000 included.
For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead.
It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?
It depends where you want the 'jump' to happen, but assuming you want the background to be yellow at 500px and blue between 501px and 999px, you can simply use the following:
#media screen and (min-width: 501px) and (max-width: 999px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Don't forget that you can also use min-width as well as max-width, and that media queries will always take priority sequentially from top to bottom.
Hope this helps!
i thing the perfect responsive media query tag is this one
#media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
width: 60%;
}
}
you want to wright to css according to media screen .
Try it it's helpful for creating responsive layout .