CODEWITHSUNDEEP
htmlcss
TEEBQNE
TEEBQNE

Reputation: 6266

Website layout for mobile looks fine on emulator but not on actual mobile device

I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?

Thanks in advance!

Website Files

Upvotes: 0

Views: 1183

Answers (2)

Harman
Harman

Reputation: 356

Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.

I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">

The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.

Upvotes: 1

Trevor Yokum
Trevor Yokum

Reputation: 160

Try adding this meta tag to your pages, in the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.

Upvotes: 0

Related Questions