1

I'm currently working on the this page. Can someone explain to me why the site won't be rendered correctly on a smartphone? The medium Query is shown instead of the small.

I integrated the foundation js-files like so:

<script src="files/bower_components/foundation/js/foundation.min.js"></script>
<script src="files/bower_components/jquery-ui/jquery-ui.min.js"></script>

and the css files (foundation, settings) are imported into my style.scss file.

I did the same on another page but there everything is working well.

Thanks for every answer!

Marvin Binnig
  • 11
  • 1
  • The second link is the same. The "hamburger" menu is appearing for a medium-sized window. – Yass Jan 17 '16 at 11:45

1 Answers1

0

I've inspected the Html content of the first page and you're using a class of hide-for-large-up for the mobile menu. This means that the menu will appear for all window widths that are not defined as large in the media queries.

I would suggest using hide-for-medium-up as generally you'd only want the mobile menu to appear for small screens. The a tag would then look like below:

<a class="mobile-navigation hide-for-medium-up" href="#offcanvas">

Also, it doesn't look like you've defined a navigation menu specifically for medium-sized content. When I shrink the window to a "medium" width, I see the "hamburger" mobile menu. If you want to specifically show content for a medium-sized screen, use a class of show-for-medium-only

Yass
  • 2,658
  • 3
  • 13
  • 21