CODEWITHSUNDEEP
htmlcssmobileresponsive-design
DriftingSteps
DriftingSteps

Reputation: 526

Mobile website with CSS, but doesn't respond to screen size?

I've just completed a mobile site for a client, and I've mainly focused on the website's lightness and responsiveness. I haven't worked on redirecting the website because it's still a work in progress BUT all the vital components have been done.
Now if you view the website in your computer and resize your browser, you'll see how it changes according to the viewport's width. But I tried viewing it in my smartphone (Samsung Galaxy S2) and I end up seeing the whole website squished into the available viewport.
Why is this happening and what do I do to make it work? Thank you very much for your time!

Upvotes: 1

Views: 2514

Answers (2)

Marcelo Austria
Marcelo Austria

Reputation: 951

Check your CSS. You haven't closed your curly brace. or you have typo error. 

/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
 padding-right: 5px;
 pading-left: 5px;
}

example css.

Upvotes: 0

Adam McArthur
Adam McArthur

Reputation: 980

Mobile browsers won't know what to do unless you specifically instruct them.

The viewport metatag is essential when designing responsive layouts. To fix this problem, simply add the following tag to your website's <head>:

<meta name="viewport" content="width=device-width">

If you feel that you need to zoom out a tiny bit more (I personally prefer this), you can also make some small tweaks to get a cool look:

<meta name="viewport" content="width=device-width, initial-scale=0.7">

Have fun,

Adam.

Upvotes: 6

Related Questions