App laid out like a mobile app even in full laptop window

link to source code?

Abraham Juliot please see updated question.

I recommend opening chrome dev tools and inspecting the container element(s). The layout settings are in your app.css file and it appears you need a min-width media query to implement your medium and full screen styles.

Here are a few resources:

• https://developer.chrome.com/devtools
• https://developers.google.com/web/fundamentals/design-and-ux/responsive/
• http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Thanks Abraham Juliot! I'll look into the resources you mentioned.

If I understand your question correctly, you have a mobile first web design (good idea) but want a different look for desktops. Therefore, you need a media query to tell the browser that for viewports of a certain width you want special CSS rules applied. For example, an iPad has width of 768px, therefore anything wider than 768px will be your first media query (source: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml).

Here's how you write a media query within CSS:

@media (min-width: 769px) {
/* INSERT CSS RULES HERE */
}

If you'd like to see a concrete example of media queries in action, checkout a project that I'm working on: https://samallen502.github.io. Open the page on your smartphone and laptop simultaneously. (Alternatively, you can use Chrome Dev Tools to emulate different screen sizes, if you know how.) See the difference between mobile and desktop? That's because of media queries within CSS. Here's my main.css repository if you'd like to see the actual code I used: https://github.com/samallen502/samallen502.github.io/blob/master/css/main.css

Hope this helps!

Thanks @Sam Allen