I want all CSS changes to have a transition. I tried
* { transition: all 1s; }
but it's not working.
Proof: http://jsfiddle.net/Lv3kpyxh/
What am I missing?
Your media query rules are ill-formed. Try this instead:
* {
transition: all 1s;
}
#media only screen and (min-width: 600px) {
.special {
padding: 30px;
border: 1px solid black;
text-align: center;
}
}
#media only screen and (max-width: 600px) {
.special {
padding: 0;
border: 0;
text-align: left;
}
}
The padding value is animated, but if you want the border to animate too, you would be better off changing the second border rule to border: 1px solid transparent;.
Updated fiddle here
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>
Inside a Vue single file component I have a scoped style section that looks like this:
<style scoped>
#media screen and (max-width: 767px) {
#suggestions, #form, #mapcontainer, #searchcontainer {
width: 100%; padding: 6px;
}
#mapcontainer div#mapx {
height: 400px
}
}
#media screen and (min-width: 768px) {
#workarea {
display: grid;
grid-template-columns: 1.5fr 1fr;
}
#mapcontainer {
grid-column: 1;
}
.blurb {
grid-column: 2;
margin-left: 12px;
}
#mapcontainer div#mapx {
height:600px;
width: 100%;
}
}
#suggestions tr { border-bottom: thin solid silver; }
#suggestions td { padding: 6px 3px 6px 3px }
#suggestions table { margin-bottom: 12px }
</style>
After checking the rendered source in Chrome's inspector I see the data tag in the rendered component like this:
<div data-s-0="" id="appspace">
but I don't see any of the expected changes to the CSS as documented in the section about scoped CSS in the vue.js docs
It seems to happen every time the scoped style contains a #media query.
What do I need to change so that styles stay scoped?
I am building a custom .css, but I do not know, how to override a bunch of classes within a media query with "nothing". Means, I do not want this in my output, but also I don't want to delete this from the css as it needs to stay original. I also don't want to copy the whole bunch of classes and write "none" or "unset" behind every single attribute. Is there any solution for this. Thanks a lot.
/*original.css*/
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
}
/*custom.css*/
/*here should be nothing like it wouldn´t even exist in the original*/
You can write as many classes in the media query within the parenthesis.
Here is an example for this
Just define the class above and change as per your requirement as per screen size.
.custom_class1 {
height : 1px;
}
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
.custom_class1 {
height:70px;
}
.custom_class2 {
height:70px;
}
}
I have a message bar that is hidden unless the server responds with a message to render something (e.g. "The password and username are invalid."). Then it eases in from the top to display the message.
In latest versions of Chrome, Edge, Safari, and Firefox, this is working fine. In IE, it flies up from the bottom of the browser, across the viewing area, and then mounts where it should be when it is viewable.
This is the Sass that I have. I've been toying with the transform and transition to get the correct results, without affecting other browsers. I not been able to, so looking for suggestions:
#messages {
z-index: 999;
position: fixed;
width: 100%;
.container {
max-width: 890px;
#media (max-width: 992px) and (min-width: 768px) {
max-width: 720px;
}
#media (max-width: 767px) and (min-width: 576px) {
max-width: 510px;
padding-left: 0px;
padding-right: 0px;
}
}
a {
color: #FFF;
font-weight: bold;
}
i {
cursor: pointer;
padding-top: 3px;
}
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-5vh);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
.hide-messages-bar.show-success-messages-bar {
background-color: $green;
transform: translateY(0vh);
padding: 8px 0;
}
.hide-messages-bar.show-error-messages-bar {
background-color: $red;
transform: translateY(0vh);
padding: 8px 0;
}
}
arbuthnott got me pointed in the right direction. It turns out px works as well so I used that instead. Was having a hard time getting % to behave the same as it did in other browsers.
Used this tool to translate vh to px:
https://jsfiddle.net/Dwaaren/j9zahaLL/
And ended up with this:
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-22.3px);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
The 0vh on the other two classes apparently wasn't doing anything so left that as is. Now all major browsers perform similarly.
I have the following media query which applies the background style to the body successfully, however it does not change the others, any ideas pleople?
#media (min-width: 980px) and (max-width: 1200px) {
body {
background:#F00;
}
.contentsearch.navbar {
margin-left: -475px !important;
top: 200px !important;
width: 950px !important;
}
.contentTabs {
margin-left: -475px !important;
width: 948px !important;
}
.ui-tabs-panel {
width: 948px !important;
}
}
heres the original css for these elements
.contentsearch.navbar {
position:absolute;
top:200px;
width:1170px;
left:50%;
margin-left:-585px;
}
.contentTabs {
border-bottom: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
bottom: 55px;
height: auto !important;
left: 50%;
margin-left: -585px;
position: absolute !important;
top: 241px;
width: 1168px;
}
.ui-tabs-panel {
border-bottom: 1px solid #DDDDDD !important;
border-top: 1px solid #CCCCCC !important;
bottom: -1px !important;
height: auto !important;
overflow: auto;
position: absolute !important;
top: 47px !important;
width: 1168px;
}
Try with this :
#media all and (min-width: 980px) and (max-width: 1200px){
....
}
You forgot declared on what type of screen you want it to be active
#media all and.....
You have :
all
screen
print
handheld
tv
etc..
You have excellent article for this
Without media type it works anyway.
If you resize browser nothing happens?
Original css should be displayed when your screen size has more than 980px, correct?
I have solved the issue, thanks for your responses.
The problem was i was copy and pasting styles from another application, in transit them seem to have picked up some kind of strange formatting/characters, after rewriting them by hand it now works!