how to assign a css value for mobile and desktop in one line

Question

I have HTML div with width of 190 px that's working normal for desktop but for mobile its not , is there a way to tell if connection is from desktop take this value else take this value ?

this is my code :

document.querySelector('.article').style.width ='190px';

Answer 1

In your css file

// Desktop
.article {
    width: 100px;
}


// Mobile
@media only screen and (max-width: 768px) {
    .article {
        width: 50px;
    }
}

This are Media Queries.

In the first lines, we don't have any limitation, but then you override the current value ONLY when the width of the screen is lower than 768px