'Page's height is too long on mobile. How to reduce the length
I am working on getting my website to be fully responsive and am experiencing some trouble with getting the formatting for mobile to look correct. The page's height is too long on mobile and content is not large enough for the user to see clearly; I've attached a photo of what this looks like.
Here is the page's CSS code:
.parent-container {
display: flex;
flex-direction: column;
width: 55%;
margin-top: 5%;
margin-left: 23%;
border-style: solid;
border-color: white;
border-width: 15px;
}
.home-header {
text-align: left;
padding-top: 10%;
padding-left: 10%;
color: #ebcabc;
font-size: 40px;
line-height: 1;
}
.home-buttons {
display: flex;
flex-direction: row;
padding-left: 10%;
text-align: left
}
.button {
height: 70%;
}
.about-container {
width: 75%;
}
.main-text {
text-align: left;
padding-left: 13.5%;
line-height: 1.5;
font-weight: 500;
font-size: 18px;
color: white;
}
.tiktok {
width: 15%;
height: 70%;
padding-left: 15%;
}
.mail {
width: 50%;
height: 70%;
padding-left: 10%;
}
.calendly {
color: white;
text-decoration: none;
}
CSS code for mobile
@media only screen and (max-width: 768px) {
.home-header {
font-size: 25px;
}
.parent-container {
border-width: 10px;
}
.main-text {
font-size: 12px;
}
.home-buttons {
display: flex;
flex-direction: column;
padding-left: 10%;
text-align: center;
}
.whatever
{
width: 75%;
height: 70%;
}
.button-txt {
font-size: 8px;
}
button {
bottom: 20%;
}
.tiktok {
width: 15%;
height: 70%;
margin-left: 10%;
}
.mail {
width: 25%;
height: 70%;
margin-left: 10%;
}
.calendly {
margin-left: 60px;
}
}
How can I reduce the height of the page for mobile?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

