Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Brandon Brigham
Brandon Brigham
3,716 Points
Posted by Brandon Brigham
Brandon Brigham
3,716 Points

Mobile version of site looks too large

Hello everyone,

So if you check out a site I'm working on on your smartphone @ http://www.avlsounddesign.com/

and click on 'Weddings' and then on 'Events' you will notice that the size of the page is enlarged.

Anyone know how to make it just look normal? Normal meaning it looks as it does on a desktop but just smartphone-size...

1 Answer

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I think you're asking how to get a zoomed out view of the desktop site on a phone.

If that's right, remove this line from the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Thank you Tom! What about the Wedding page and Events page on mobile? I looked at the headers on those pages and couldn't find the code you told me to delete there.... Any ideas?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

It's on line 5 of the wedding and events pages:

<meta name="viewport" content="width=device-width" />
Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Tom - I tried deleting that line of code off the header.php file of the Weddings page but nothing changed. Am I looking at the wrong file?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

If I look at the source of the page (usually right click -> "view source") I can still see it there on line 5 after clearing the cache and refreshing. It's either not removed, the new file isn't uploaded or it's cached on your server and the old file is still being displayed. If you can make that line disappear on the live site when viewing the page source then the page should display as you're wanting it to.

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Thanks again Tom but I did that on the Weddings page and cleared my browser but it's still not coming out right on a mobile device. You can check the source yourself again and that line of code has been taken off. Not sure what else to do

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Looking again you also have this on line 134:

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

Just delete every line with "viewport" in it.