Root: the tiny media inquiry does not appear on mobile devices

Currently troubleshooting on the this page. Can anyone help me understand why the site is not displaying correctly on a smartphone? The medium Query appears instead of the small one.

I have included the foundation js files like this:

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

The css files (foundation, settings) are imported into my style.scss file as well.

I did the same thing on another website and everything seems to be working fine there.

Appreciate any assistance provided!

jqueryhtmlcsszurb-foundationcontao

Answer №1

After reviewing the HTML content of the initial page, I noticed that you are utilizing a class called hide-for-large-up for the mobile menu. This indicates that the menu will be visible for all window widths except those classified as large in the media queries.

I would recommend switching to hide-for-medium-up since typically you only want the mobile menu to display on small screens. The a tag should then appear as follows:

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

In addition, it seems that there is no specific navigation menu defined for medium-sized content. Upon resizing the window to a "medium" width, I observed the hamburger mobile menu. If you intend to display content exclusively for medium-sized screens, consider using a class like show-for-medium-only.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I require assistance in configuring the timing for an animation using Jquery

How can I adjust the timing (delay between two words) for this animation? If you need help, you can check out this link for guidance. Feel free to share your suggestions! ...

javascriptjqueryanimation

CSS problem: HTML element moving to the right upon clicking

Currently, I am utilizing a jQuery popup to present additional information to users. The setup involves having a link on the page that triggers the popup to appear from the top. The popup script being used is sourced from CodePen. However, an issue arises ...

jqueryhtmlcssmagnific-popup

Animating the left and right positioning of a single element using CSS transitions

I am currently working with the following CSS code: #masthead { transition: left linear 0.25s; -moz-transition: left linear 0.25s; -o-transition: left linear 0.25s; -webkit-transition: left linear 0.25s; -ms-transition: left linear 0.2 ...

jqueryhtmlcss

The Mat-slide-toggle resembles a typical toggle switch, blending the functionalities of

I am facing an issue with a `mat-slide-toggle` on my angular page. Even though I have imported the necessary values in the module, the toggle is displayed as a normal checkbox once the page loads. HTML: <div style="width:100%;overflow:hidden"> < ...

htmlangulartypescript

Selecting a unique value of an element with the same ID in jQuery is a simple task

<c:forEach var="projects" items="${projectList}"> <tr> <td class="font "> <a href="#" id="projectname" name="projectname" class="testone" >${projects.name}</a> </td> <input type ...

jspjquery

Attempting to trigger CSS transitions using JavaScript will not be successful

I'm facing an issue where CSS transitions do not work as expected when triggered by JavaScript. let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.sty ...

javascripthtmlcsscss-transitionsdom-manipulation

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

User agreement required for HTML5 geolocation custom notifications

Currently implementing HTML5 geolocation on my mobile website. I am exploring the possibility of displaying a custom notification instead of the default web browser notification to request user consent for sharing their location. This custom notification ...

htmlgeolocation

Utilizing the dynamic duo of jQuery Overlay and Scrollable/Tabs to enhance direct navigation in web design

I am utilizing jQuery tools overlay to load a page through ajax. I need the ability to pass specific parameters to this page when the overlay is triggered. The goal is for the external page to be able to access these parameters upon opening and use jQuery ...

jqueryoverlay

Differences Between Mobile and Desktop Browser Media Queries

As I work on creating a responsive website, I have come across various examples of sites that adapt well to both desktop and mobile browsers. Currently, my stylesheet setup includes different media queries for various screen sizes. However, I've notic ...

cssresponsive-designmedia-queries

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Barba.js (Pjax.js) and the power of replacing the <head> tag

I have been using barba.js to smoothly transition between pages without having to reload the entire site. If you want to see an example, take a look here. Here is a snippet of code from the example: document.addEventListener("DOMContentLoaded", func ...

javascriptjquerypjax

Concerns with JQuery UI autocomplete: Limited search results available

I'm in the process of developing a search engine using JQuery UI autocomplete feature. The data is stored in a mysql database. While the search query does return some results, it fails to generate a satisfactory number of matches. When I run a search ...

jqueryjquery-uiautocompletejquery-ui-autocomplete

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

javascriptjqueryhtmlcssajax

Why does the Element.style.left property keep rejecting my input value?

I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally ...

javascripthtmlcss

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the botto ...

javascriptcssreactjsreact-bootstrap

The html element is failing to adjust its height to match the entirety of the browser window, even when set to

After inspecting my HTML element, I noticed that it isn't occupying 100% of the browser view, even though I have set the height to 100% in my CSS file. I tested it in both Chrome and Firefox, and the issue persists. I suspect that the browser is addin ...

htmlcss

Refreshing a section of a webpage using AJAX and PHP

After creating a RESTful API in PHP, I can easily register information by accessing the address . This registration process involves sending a POST request. Below is an overview of my method: File: api.php <?php /* File: api.php */ private function ...

javascriptphpjqueryajax

Maximizing HTML5 Game Performance through requestAnimationFrame Refresh Rate

I am currently working on a HTML5 Canvas and JavaScript game. Initially, the frames per second (fps) are decent, but as the game progresses, the fps starts decreasing. It usually starts at around 45 fps and drops to only 5 fps. Here is my current game loo ...

javascripthtmlperformancecanvasrequestanimationframe

Conceal the <div> element if the <span>

Is there a way to hide the content within this div if the prop-value is empty? I specifically want to hide the text "First class" when Prop-value does not have any value. Any solutions? <div> <span class='prop-name'>F ...

jqueryhtmlcss