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

CSS

Marius V
Marius V
9,043 Points
Posted by Marius V
Marius V
9,043 Points

Why is my site not responsive?

I build a simple blog for me with jekyll: rasmus1610.github.io But somehow the site isn't displayed responsive on my mobile phone, although when I resize my browser window to a viewport size of a smartphone everything is displayed correctly. Why is this not the case when viewing the page on my iPad or mobile phone? Why is the font and stuff getting smaller?

Thanks in advance

Marius

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Marius,

Have you checked that you've included the viewport tag?

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

Smartphones and Devices render HTML differently but tags like this one force all devices to scale and view the way expected when you use media queries.

Marius V
Marius V
9,043 Points
Marius V
Marius V
9,043 Points

thx Jonathan. That was the answer I hoped for. :)

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Did you setup any media queries? By setting up media queries you can specify what you view on certain devices.

Marius V
Marius V
9,043 Points
Marius V
Marius V
9,043 Points

I don't need media queries for my site. If you look at my site you see that I don't even have a grid system. The problem is not that it is not displayed correctly on small viewport sizes but somehow not correctly on a smartphone or tablet. As I said. Resizing the browser windows makes my site behave exactly like I want to but viewing it on a smartphone makes it not.

Although I used bootstrap which is maybe a bit over the top for my site but anyway.