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?
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;
}
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'm using WP RSS Aggregator, and I've styled the feed into containers, along with creating a 3 column layout. Limiting the feeds to 18 per page, I'm experiencing overflow issues. Setting the CSS to overflow:hidden !important; has not resolved the issue. Being the length of each feed item varies, I'm hoping for a solution that will carry through each feed category. Below is a link to the feed page, followed by the CSS I've implemented for feed imports into their respective pages. Thank you in advance for your help.
enter image description here
div.wprss-et-social-buttons {
display: none;
}
.thumbnail-excerpt img{
float: none !important;
}
.thumbnail-excerpt {
text-align: center;
}
li.feed-item{
overflow: hidden !important;
border: solid #000 2px;
border-radius: 5px;
padding: 10px;
width: 250px;
background: #eee;
}
.thumbnail-excerpt {
overflow: auto !important;
}
wprss-feed-excerpt{
font-size: 16px;
text-align: center;
}
li.feed-item > a{
font-size: 23px;
text-align: center;
}
ul.rss-aggregator{
column-count: 3 !important;
list-style-type: none;
}
#media only screen and (max-width: 980px) {
ul.rss-aggregator {
column-count: 2 !important;
}
}
#media only screen and (max-width: 479px) {
ul.rss-aggregator {
column-count: 1 !important;
}
}
I have a styled component as below
const StyledCustomComponent = styled.aside`
min-width: ${gridPts(19)};
background-color: ${HIGHLIGHT_BLUE};
flex: 0 0 auto;
${fontSize(13)}
padding: ${gridPts(2)};
#media only screen and (max-width: ${MQ_320}) {
padding: ${gridPts(1)};
}
#media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
&:first-child {
margin-top: 0;
}
}
`
When I inspect it in the browser and resize to match the media query, the :first-child style does not apply.
And the child components of the above component are styled as below
const StyledCustomComponentChild = css`
margin: ${gridPts(1)} ${gridPts(1)} 0;
#media only screen and (max-width: ${MQ_575}), (min-width: ${MQ_961}) and (max-width: ${MQ_1285}) {
display: inline-block;
float: left;
margin-right: ${gridPts(1)};
& * {
display: inline-block;
margin-right: ${gridPts(1)};
}
}
#media only screen and (min-width: ${MQ_1285}), (min-width: ${MQ_575}) and (max-width: ${MQ_961}) {
display: block;
line-height: 1.5em;
margin: ${gridPts(3)} 0;
white-space: nowrap;
&:first-child {
display: block;
}
}
`
This style is applied to the component itself instead of its first child
here is the screen shot of how the style is interpreted in the browser dev tools
Notice there is no space before :first-child
If I manually add a space through dev tools then the style is applied as expected
import styled from 'react-emotion'
const StyledDiv = styled.div`
color: turquoise;
& :last-child {
color:green;
}
& :first-child {
color: red;
}
`
render(
<StyledDiv>
<p>First</p>
<p>Second</p>
<p>third</p>
<p>last</p>
</StyledDiv>
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Can anyone guess what might be the issue?
Both selectors work for me. Use a tag like <div/> or <p/> etc. before :last-child (depending on your code, it may be also another tag).
export const blogSection = css`
disaply:flex
& div:last-child {
background: #ff0000;
}
`;