i'm very new at this. My issue here is that when i look at my mobile css from localhost it looks fine, but then when it is deployed (tried both heroku and github) it looks really weird. And when i change things to extreme values it seems like nothing happens in the deployed one.
html:
<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;
}
}
}
tried both with and without support. I added "!important" just to try if it makes any difference. = no. checked that all my links are https and not http in the html. Tried two different phones. Cleared cache. 3 different browsers (safari, google, and the samsung one).
The desktop version looks fine.
Link to site: https://ascoolarobban.github.io/resumegame/
Screen dumps:
Ok so i found a solution, if anybody get this problem in the future..Its not a pretty one but.. I took the autogenerated localhost-code and pasted in the bottom of the body and now it actually works..
<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>