The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme changes to the values, it seems like nothing is reflected in the deployed version.

Here is my code:

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

CSS:

@media (max-width: 600px) {
@supports (display: grid){

    .super-container {

        width: 100%;!important;
        max-width: 100%;!important;
    }
    .container {
        width: 90%;!important;
        max-width: 100%;!important;
    }

    .btn2 {
        margin-top: 20px;
        width: 30%;
        flex-direction: column-reverse;
        color: black;

    }
}

}

I have tried using 'support' and also without it. Adding "!important" didn't seem to have any effect. I ensured all links are HTTPS in the HTML file. I tested it on two different phones, cleared cache, and used three different browsers (Safari, Google Chrome, and Samsung browser).

The desktop version displays correctly.

Visit the site here:

Screenshot comparisons:

Deployed Version

Localhost Version

javascripthtmlcssgithubfrontend

Answer №1

After encountering this issue, I managed to find a workaround that might help others facing the same problem in the future. It may not be the most elegant solution, but it did the trick for me.

   <script>

    (function() {
        var ws = new WebSocket('ws://' + window.location.host + '/jb-server-page?reloadServiceClientId=4');
        ws.onmessage = function (msg) {
            if (msg.data === 'reload') {
                window.location.reload();
            }
            if (msg.data.startsWith('update-css ')) {
                var messageId = msg.data.substring(11);
                var links = document.getElementsByTagName('link');
                for (var i = 0; i < links.length; i++) {
                    var link = links[i];
                    if (link.rel !== 'stylesheet') continue;
                    var clonedLink = link.cloneNode(true);
                    var newHref = link.href.replace(/(&|\?)jbUpdateLinksId=\d+/, "$1jbUpdateLinksId=" + messageId);
                    if (newHref !== link.href) {
                        clonedLink.href = newHref;
                    }
                    else {
                        var indexOfQuest = newHref.indexOf('?');
                        if (indexOfQuest >= 0) {
                            // to support ?foo#hash
                            clonedLink.href = newHref.substring(0, indexOfQuest + 1) + 'jbUpdateLinksId=' + messageId + '&' +
                                newHref.substring(indexOfQuest + 1);
                        }
                        else {
                            clonedLink.href += '?' + 'jbUpdateLinksId=' + messageId;
                        }
                    }
                    link.replaceWith(clonedLink);
                }
            }
        };
    })();

</script>

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

Ways to Insert Text and Values into an Array

{{ "user": "randomuser", "message": "require assistance" }, { "user": "automated assistant", "message": "do you need any help?" }, { "user": "randomuser", "message": "another inquiry" } I am seeking to extract additional paragraphs ...

javascriptjquery

When testing my jQuery locally, it runs smoothly. However, upon uploading it to my website, I encounter some issues where it

After successfully running my webpage on localhost, I encountered an issue when uploading it to my website. Only a portion of the code seems to be executing properly. I have included the following jquery function in my script and there are no reported err ...

javascriptjqueryajaximage

Is it possible to enforce strict typing for a property within an object that is declared as type 'any'?

In my code, I am dealing with a parent object of type 'any' that remains constant and cannot be changed. Within this context, I need to define a property for the parent object, but no matter what I try, it always ends up being loosely typed as &a ...

javascripttypescript

Is it possible to place two identical canvases on top of each other beside a separate canvas?

Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png Attempting to address this issue with the ...

csshtmlcanvas

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...

javascriptphpjqueryhtml

How can I resolve the issue of the mouse x/y glitch while drawing on an HTML canvas using JavaScript/jQuery?

I've been searching all over for a solution to this issue, but I just can't seem to find out what's causing the problem... This is my first attempt at working on something like this in my spare time. I hope to apply what I learn to create a ...

javascriptjqueryhtmlcanvasdraw

Console displays 'undefined' when using the post method with Node.js/Express

Below is the code for my upload.ejs page: <%- include('header' ,{ title:"Playground" }) -%> <div class="wrapper"> <form action="/upload" method="POST" enctype="multipart/form-data"> <input type="text" name="name" place ...

javascriptnode.jsexpress

Retrieve a specific value from an array within Firestore

I am facing an issue where I can only retrieve the values I need from the array by adding a specific string like "اقلام" or "سبورة". However, I want the value to be passed as a prop from another component or screen. Is there a way to resolve this ...

javascriptfirebasereact-nativegoogle-cloud-platformgoogle-cloud-firestore

My CSS skills are put to the test in the latest version of Safari, as they only seem to work when I move

I have been working on a CSS menu for a website and have made it work perfectly on Firefox, Chrome, and an old Safari version. However, I encountered a strange issue with the latest Safari version (6.0.2 on Lion). When the page is fully loaded and I hover ...

htmlcssmenubariweb

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml

Promise.all() ensures that all promises in the array are resolved with the same value

Currently, I'm in the process of developing a module that contains a function designed to return a promise using Promise.all() for the purpose of sending emails to multiple users. By simplifying the code, I have managed to isolate and reproduce the is ...

javascriptnode.jspromisees6-promise

jQuery is missing an essential component that is causing an error

I have successfully implemented the following JavaScript code and everything is working fine. However, I'm uncertain if my code is fully correct. I noticed that in my script, I only utilize success: function() without incorporating an error function. ...

javascriptjqueryajax

The vue template is indicating an error related to unused variables according to the eslint rule vue/no

Perhaps this information will come in handy for someone. I am working with a Vue template that contains HTML. <template slot="HEAD_Status" slot-scope="data"> <!-- some html without using of data --> </template> Eslint is showing [v ...

htmlvue.jseslint

Vue-powered custom mute/unmute button malfunctions inexplicably when deployed, despite functioning flawlessly during development phase

I'm currently struggling to understand why the mute/unmute button is not functioning as expected. The issue seems to arise when the code is deployed on Netlify, as it works fine on localhost. Essentially, the button mutes and unmutes the video, but th ...

htmlvue.jsnuxt.js

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Tips for saving information in an array with Vue.js?

I am working on a task where I need to fetch data from an API and store only the values that are marked as "true" in a variable. The API response is listed below: API Output Data { "BNG-JAY-137-003": false, "BNG-JAY-137-004": true, ...

javascriptarraysvue.js

How can we alert users when data has been updated without the need for a page

The following code was authored by me: $('.actionButton').click(function(){ var buttonValue = $(this).val(); var userId = '<?php echo $_SESSION['id']; ?>'; console.log(userId); ...

javascriptphpjqueryajax

Leverage the package.json script without relying on any yarn/npm commands

Can scripts commands be executed within the package.json file without needing to include yarn or npm? For example: "scripts": { "get": "node index.js" } Currently, in order to run this script I have to use yarn get [ar ...

javascriptnode.jsnpmyarnpkg

Rerender not occurring after array splice with React hooks setter

My parent component structure is as follows: import React from "react"; import Test from "./Test"; function App() { const [configs, setConfigs] = React.useState([1, 2, 3]) return ( <div> ...

javascriptreactjsfrontend

The Javascript functionality does not seem to be functioning properly within the Bootstrap navigation

I'm having an issue with my Bootstrap navbar JavaScript. Below is the code that's causing the problem: <script type="text/javascript"> $(".nav a").on("click", function () { $(".nav").find(".active").removeClass("active"); $(this).p ...

javascriptjquerytwitter-bootstrapnavbar