Respond.js appears to be without functionality

Can anyone lend a hand? I'm feeling incredibly frustrated trying to get respond.js to cooperate.

Typically, we have no issues with using it on our mobile sites. However, I am currently facing challenges trying to achieve mobile compatibility on one of our very old systems.

I've exhausted all possible solutions - trimmed down unnecessary code, experimented with alternatives to respond.js, attempted inline script placement, and even created a local copy. Despite my efforts, I can't seem to identify the elusive mistake at this moment.

Below is the pared-down code snippet - functions perfectly in Chrome as usual. It's evident that respond.js isn't functioning because when I place mobile styles in a media query, they remain inactive.

I've also tested all these methods on the server to rule out any local issues.

If someone could kindly point out the oversight, it would be greatly appreciated!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="property-results">
    <head>
        <title>Search Results</title>
        <link href="http://www.skitts.net/css/results.css" rel="stylesheet" type="text/css" />

        <script src="http://searchtest.issl.co.uk/js/respond.js"></script>
    </head>
    <body>
        <div class="property clearing">
            <div class="property-info">
                <span class = "address">CROWN STREET, WOLVERHAMPTON.</span>
                <span class = "price">
                    <span class = "pre-price"></span>
                    <span class = "price-amount">&pound;10,500 Annually</span>
                    <span class = "post-price"></span>
                </span>
            </div>

            <a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="image" target="_blank" >
                <img src="http://img.issl.co.uk/2047/008/thumbs/GRB-11MH0ZQA_3559464935.jpg" alt="Address" />
                <div class="status let">Let</div>
            </a>

            <p class="description">SEPARATE STORAGE YARD To the north of the units is an adjacent fully enclosed storage yard with separate vehicular access extending to some 1,961 sq.yds. (0.4 a...</p>

            <ul>
                <li>0 Bed</li>
                <li>0 Bath</li>
                <li>0 Reception</li>
            </ul>

            <a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="more link" target="_blank">View full details and photography</a>

            <div class="ref-more">
                <span class="ref">REF: GRB-11MH0ZQA</span>

                <a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="more button" target="_blank">See more</a>
            </div>
        </div>
    </body>
</html>

Answer №1

I had a feeling it would turn out to be something silly. It seems that respond.js is unable to work with a stylesheet located on a different domain for clear reasons.

Oops!

Answer №2

Check out the compiled fiddle I created for your project.

Seems to be functioning well across all browsers from my end."

Fiddle

Have you experimented with including a meta viewport in your head tag?

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

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

Item within text box remains untouched

I am working with a 1) Text field 2) Drop down list 3) List box I have written code to add the selected value from the drop down list to the list box and text field, but I'm having trouble removing the value from the text field. Can someone please he ...

Angular displayed an unexpected error message with code TS2554, indicating that it was expecting 1 argument but received

There seems to be an error in your code. The error message reads: src/app/form-page/form-page.component.html:1:29 - error TS2554: Expected 1 argument, but got 0. <mat-form-field (ngSubmit)="onSubmit()" class="form-register"> ~~~ ...

JavaScript appends a backslash character to a CSS class

I am attempting to populate index.html with the contents from an array using a JavaScript loop. However, I am encountering an issue where a CSS class for picture formatting is displaying some odd characters when rendered in the latest version of Firefox. ...

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

Align the Font Awesome icon and text in the middle vertically within an <a> tag/router-link

My b-button acts as a router-link/a tag, and I can't seem to get the content centered the way I want. I'm aiming for the text to be below my font awesome icon, with both elements aligned both horizontally and vertically, but nothing I've tri ...

Unusual alignment glitch

Just starting out with HTML and CSS as I build my very first website, I've encountered a baffling alignment and positioning issue that has left me scratching my head. Any help in shedding light on this mystery would be greatly appreciated. To better ...

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

Troubleshooting Challenges with Embedding Videos in Wordpress

I'm running into an issue with a heavily customized Wordpress site. Out of nowhere, one of the pages has stopped functioning! The problem arises when attempting to click on a video link, which should open a lightbox clone (prettyPhoto) displaying a Y ...

Integrate a feature in your form that allows users to preview and edit their submission before finalizing

I've set up my HTML form with the following structure: <div class="container"> <div class="form-group" ng-controller="studentController"> <form role="form" class="well form-horizontal" id="registerForm" name="forms.register ...

Using JavaScript to grab an entire div containing an SVG element

I am looking to capture an entire div as an image and save it locally as proof. Despite reading numerous articles on converting SVG to image or div to image, I have encountered challenges in achieving the desired result. Several attempts with JavaScript l ...

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

What could be causing my centrally-aligned divs to not scroll horizontally?

(Please note that there are no scrollbars on these divs, so scrolling to the left is not possible within the body or the divs themselves.) The issue (shown above in FF and Opera) occurs on both the "Baroque" and "Spotlights" theme selections (refer to the ...

Exploring Deeply Nested Routing in Angular

I've been exploring the use of multiple router outlets and encountered an issue. When using the navigateBy function of the router, I am unable to view my child route and encounter an error. However, when I access it via the routerLink in HTML, I get ...

A guide to sending HTML emails with the Linux command line

I am in search of a solution to send emails in HTML format using only the Linux command line and the "mail" command. So far, I have tried the following: echo "To: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f8fdfdebfceae ...

Is there a way to position the dropdown arrow on an HTML5 date input to the right side?

As a newcomer to HTML and Bootstrap, I find myself facing this code conundrum: <dd class="col-4"> <div class="input-group input-group-sm form-group"> <span class="input-group-addon ...

Update the innerHTML content dynamically every 5 seconds with Vue.js

I'm working on a new website and I'd like to spice things up by changing the header text with a random word every 5 seconds. Here's the starting point: const header = document.querySelector('.header') const needs = ['jacket& ...

Preventing access to drives and desktop until the mandatory HTML form is completed

Looking to develop a webpage in JSP that will automatically open whenever my system is started. Users will be required to fill out a form on this page before proceeding further. If they attempt to bypass filling out the form, they should not have access ...

Unable to choose the div element with id ":1"

Just starting out with web development, and I have a div element with the following attributes: <div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset= ...

The scaling of the slick carousel image is not working as expected

Having an issue with the Slick carousel where images are not resizing based on browser size (original size is 300x228px). Just to clarify: When I shrink the browser window, the number of slides decreases but the images remain the same size. I've bee ...

Validating Forms with Jquery across Various Inputs

My HTML page includes multiple dynamically generated forms, ranging from 1 to 4 in number. I am looking for a way to validate each input field when the form is submitted. Below is the code I have: <script type="text/javascript"> $(document).re ...