Question

I am coding HTML newsletter, I have to code one file that once sent it detects device if it’s smartphone or PC. If PC it shows 600px width and for smartphones it shows 300px width.

So how should I set the width property so that it looks as per the width mentioned above.

Answer 1

You are looking for CSS Media Queries, here is a basic solution that may suit your needs:

/* ALL (Fallback), this will be used by browsers that don't support CSS Media Queries  */ 
#container{width:300px;}

/* Screen more than 600px in width */
@media only screen and (min-width: 600px){
    #container{width:600px;}
}

/* Screen less than 600px in width */
@media only screen and (max-width: 599px) {
    #container{width:300px;}
}

More examples here: https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.css#L79