'Responsive website is not working mobile devices
I am having big trouble with my website as it is not being responsive. I already included the required script for adjusting page to device width on the html :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I also made sure I was using 320px as minimum device width and 688px as maximum for my media queries but it seems it doesn't work at all. By trouble I mean I am encountering the following issues:
First: Since editing the file on my liveport, I could notice that the page could scroll to the right, and if done, you can see like a kind of black "empty" space that goes from top to bottom of the entire document, again, located at the right hand of the page. This is my major issue as on mobile phones the page's content is not over the body but rather located at half over the body and this mysterious black empty space I cannot fix. I don't know if it has something to do with the body of the page, I already tried multiple methods but it still doesn't work.
Second: As a result of the first problem, some elements appear shifted and floating. It is as if this empty space is not part of the page and generates a strong distortion in the rest of it and its other elements.
[A picture of the issue][1]
The blue part is the body element, the black is not defined in any part of the document. It is also worth mentioning this is mobile view in a PC, as when viewing in phones it gets worse as this black spaces takes over have of the page's space.
The following code is my HTML and CSS for the page on PC and mobile devices, respectively:
body {
background: linear-gradient(to right, #000, #1d152f);
position: relative;
height: 100%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto Serif', serif;
font-weight: 400;
}
@media screen and (max-width: 688px) and (min-width: 320px) {
div.container {
display: grid;
grid-template-columns: auto;
max-width: 1440px;
margin-right: auto;
margin-left: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
h1 {
font-size: 3rem !important;
padding-left: 20px !important;
margin: 15px 15px;
}
.image-9 {
top: 250px !important;
right: 110px !important;
bottom: 0%;
max-width: 100% !important;
display: grid;
}
}
}<body>
<div class="container">
<h1>Text goes here<br>text goes here<br>text goes here</h1><img src="" alt="" class="image-9">
<p style="color: #4a8ad3; font-family:'Roboto Serif', serif; font-size: 1.2rem; font-weight: bold;">text goes here</p>
<p class="max-700">text goes here</p>
</div>
<body>
<div class="redirect-modal" id="modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="logo" id="navbar__logo" class="modal__logo">
<br>
<br>
<strong style="font-size: 0.8rem;">text goes here</strong>
<p style="color: whitesmoke; font-size: 0.9rem; font-family: Roboto Serif;">By accessing this link you are leaving <a href=http://example.com/ style="color: #4a8ad3;">example.com</a>text goes here<br></p>
<form action="?" method="POST">
<div class="g-recaptcha" style="padding-left: 45px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<p class="max-700" style="font-size: 0.7rem">By logging in, you agree to the <a href="terms.html" style="color: #4a8ad3; font-size: 0.8rem;">Terms of Service</a></p>
<form action="example.com">
<button type="submit" value="login" id="link-to-app" class= "link-to-app" disabled><i class="fa-solid fa-up-right-from-square"></i>Login</button>
</form>
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</div>
</div>
</body>Third: On media query view in PC, the image behind my h1 text is placed correctly, but again when viewed on mobile devices, it is completely messed up.
Fourth: There is a recaptcha at the footer that disables and enables a contact button that opens the user's email app. The recaptcha works fine in both types of devices, nevertheless, the button only works in computers and not in phones. This is the code I am using for this:
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<form action="mailto:[email protected]" method="POST" enctype="multipart/form-data">
<button onclick="sendContact();" type="submit" id="submit" style="width: fit-content; padding-left: 10px; padding-right: 10px; margin: 5px;" disabled>Send us an email</button>
</form>
</fieldset>
Fifth: I guess this is the result of all the issues described above; the page is obviously not adapting to device width and every time I open it on devices with different screen sizes it is completely different.
This is the Screenshot of the issue with the page being viewed on mobile view
Solution 1:[1]
The Issue is your .image-9 class. Add same css as shown below and add an image as shown in html below. I think this should work for you. Also a small tip: use background-color: #000; a backup for not supported browsers when using gradient colours.
Revised CSS-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto Serif', serif;
font-weight: 400;
}
body {
background-color: #000;
background: linear-gradient(to right, #000, #1d152f);
/* background-image: linear-gradient(to right, #000, #1d152f); */
position: relative;
height: 100%;
}
.modal__logo {
width: 10%;
}
.image-9 {
max-width: 100%;
padding: 0 1rem;
}
@media screen and (max-width: 688px) and (min-width: 320px) {
div.container {
/* display: grid; */
/* grid-template-columns: auto; */
max-width: 1440px;
margin-right: auto;
margin-left: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
h1 {
font-size: 3rem !important;
/* padding-left: 20px !important; */
/* margin: 15px 15px; */
}
/* .image-9 {
top: 250px !important;
right: 110px !important;
bottom: 0%;
max-width: 100% !important;
display: grid;
} */
}
Revised HTML -
<div class="container">
<h1>Text goes here<br>text goes here<br>text goes here</h1>
<img
src="https://images.pexels.com/photos/4577703/pexels-photo-4577703.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="" class="image-9">
<p style="color: #4a8ad3; font-family:'Roboto Serif', serif; font-size: 1.2rem; font-weight: bold;">text goes here
</p>
<p class="max-700">text goes here</p>
</div>
<div class="redirect-modal" id="modal">
<div class="modal-content">
<div class="close">+</div>
<img src="https://static.wixstatic.com/media/2c0034_400708cb5f7d44bcb1f272ebc2a51aab~mv2.png" alt="logo"
id="navbar__logo" class="modal__logo">
<br>
<br>
<strong style="font-size: 0.8rem;">text goes here</strong>
<p style="color: whitesmoke; font-size: 0.9rem; font-family: Roboto Serif;">By accessing this link you are
leaving <a href=http://example.com/ style="color: #4a8ad3;">example.com</a>text goes here<br></p>
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;"
data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback"
data-theme="dark"></div>
<br />
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<form action="mailto:[email protected]" method="POST" enctype="multipart/form-data">
<button onclick="sendContact();" type="submit" id="submit"
style="width: fit-content; padding-left: 10px; padding-right: 10px; margin: 5px;" disabled>Send us an
email</button>
</form>
</fieldset>
<p class="max-700" style="font-size: 0.7rem">By logging in, you agree to the <a href="terms.html"
style="color: #4a8ad3; font-size: 0.8rem;">Terms of Service</a></p>
<form action="example.com">
<button type="submit" value="login" id="link-to-app" class="link-to-app" disabled><i
class="fa-solid fa-up-right-from-square"></i>Login</button>
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Nimantha |