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

JavaScript

Posted by Ashley Wile
Ashley Wile
8,452 Points

Responsive with Javascript not working on mobile but fine on re-sized desktop.

Hello. I have created a responsive site that works well on desktop, even when resized down to mobile screen size. Javascript hides my mobile nav once clicked and shows elements properly. When viewed on mobile, the Javascript is not hiding the nav onced clicked. I apologize as I am slowly learning Javascript. The code below is what I have been using as an external script.

```outWidth = window.outerWidth;

if (outWidth <= 610) { $(".main").css( "display", "none" ); $(".payment").css( "display", "none" ); $("hr").css( "display", "none" ); $(".dated-copyrightb").css( "display", "none" ); };```

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

From your description, my first guess would be that you haven't included a responsive meta tag in your HTML. Make sure you have something like the following in your HTML head:

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

If you have that included and it's still not working, please post all of your code. The easiest way to do this is using a workspace snapshot. You can access this feature using the camera icon in the top right of a workspace.

Ashley Wile
Ashley Wile
8,452 Points

Thank you for your feedback. I do have the meta tag included. I will get a snapshot together.

Ashley Wile
Ashley Wile
8,452 Points

Here is a basic snapshot of the site.

[https://w.trhou.se/90e7l5tu9m]

Thank you so much for taking your time to help!

rydavim
rydavim
18,814 Points

Hmmm...the scaled-down desktop version and the mobile version seem to be behaving similarly for me.

Desktop Screenshot: Desktop

Mobile Screenshot: Mobile

Can you elaborate on the issue you're seeing?

I would comment that you could probably eliminate the following script by using a CSS media query to hide those elements, and then toggling the visibility with JavaScript.

outWidth = window.outerWidth;
if (outWidth <= 610) { 
  $(".main").css( "display", "none" ); 
  $(".payment").css( "display", "none" ); 
  $("hr").css( "display", "none" ); 
  $(".dated-copyrightb").css( "display", "none" ); 
};

-vs-

@media screen and (max-width: 610px) {
  .main,
  .payment,
  hr,
  .dated-copyrightb {
    display: none;
  }
}