CODEWITHSUNDEEP
htmlcssmobileresponsive-design
Jess McKenzie
Jess McKenzie

Reputation: 8385

Mobile Media Queries

I have a website that I need to have working on mobile devices currently it displays like the image below.

So far I have had the following ideas:

  1. Copy the 680 lines of CSS again within the same document in between @media only screen tags.
  2. Copy the same code into a mobile.css stylesheet and start again

"2" is my least favourite option but the most likely I am just wanting to know what your options would be?

iPhone View:

enter image description here

Upvotes: 0

Views: 838

Answers (2)

user2677350
user2677350

Reputation: 336

Put this in the head of your HTML 

    <meta name='viewport' content='width=device-width, initial-scale=1 />

Upvotes: 2

user2329093
user2329093

Reputation:

It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:

@media screen and (max-width: 1000px) {
.mytitle {
   font-size: 80px;
   }
}
@media screen and (max-width: 600px) {
.mytitle {
   font-size: 40px;
   }
}

Upvotes: 0

Related Questions