I was remaking Product Land Page sample project in separate html and css files. Copied some css code from codepen.io environement, but i had a problem. Style has not been implemented. I tried it in Edge and Chrome, but nothing. Then I realize, for example, this part of code from codepen environment:
.logo {
width: 60vw;
@media (max-width: 650px) {
margin-top: 15px;
width: 100%;
position: relative;
}
img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
@media (max-width: 650px) {
margin: 0 auto;
}
}
}
should be done like this in css file:
.logo {
width: 60vw;
}
@media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
@media (max-width: 650px) {
.logo img {
margin: 0 auto;
}
}
Even media queries are put between attributes.
also, there are few comment lines beginning with // in css part of code
which is not acceptable by browsers.
Is this way of writting css only used in codepen environment?
How can I convert such code automatically to regular css code?