Прокрутка не идет, когда я переключаюсь на мобильное представление в Chrome Developer Tool, весь контент виден на экране, что делает его очень трудным для чтения, поскольку он стал очень маленьким для регулировки высоты.Таким образом, содержание корректируется и, следовательно, становится крошечным.Прокрутка не идет, когда я переключаюсь на мобильное представление в Chrome Developer Tool, весь контент виден на экране, что делает его очень трудным для чтения, поскольку он стал очень маленьким для регулировки высоты.Таким образом, содержание корректируется и, следовательно, становится крошечным.
<!DOCTYPE html>
<html>
<head>
<title>GetToWork</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style>
.main-container {
display: flex;
flex-flow: column wrap;
align-items: center;
font-family:Lato, Arial, Sans serif;
padding: 0 10%;
}
body {
border: 1px solid gray;
}
footer {
height: 240px;
background-image: url(./Group\ 4265.svg);
}
.header-icon{
width: 100px;
margin-top: 60px;
margin-bottom: 60px;
}
.margin-top-60 {
margin-top: 60px;
}
.lato-bold {
font-size: 24px;
font-weight: bold;
line-height: 1.21;
letter-spacing: normal;
text-align: center;
color: #000000;
}
.lato-bolder {
font-weight: bold;
}
.font-size-21 {
font-size: 21px;
}
.font-size-18 {
font-size: 18px;
}
.margin-top-20 {
margin-top: 20px;
}
.margin-top-30 {
margin-top: 30px;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
.width-100-percent {
width: 100%;
}
.flex-justify-space-around{
display: flex;
justify-content: space-around;
}
.flex-justify-space-between{
display: flex;
justify-content: space-between;
}
.flex-justify-space-between{
display: flex;
justify-content: center;
}
.flex{
display: flex;
}
.justify-flex-end {
justify-content: flex-end;
}
.maroon-bg {
color:#7a2693;
}
.width-80-percent {
width: 80%;
}
.dashed-border{
border: 1px dashed #8b4c9e;
width: 320px;
display: inline-block;
vertical-align: super;
}
.padding-left-right-10-percent {
padding-left: 10%;
padding-right: 10%;
}
.width-150 {
width: 150px;
}
.margin-bottom-20{
margin-bottom: 20px;
}
.flex-column {
display: flex;
flex-flow: column;
}
.footerIcons {
position: absolute;
margin-top: 100px;
width: 100%;
display: flex;
flex-flow: column nowrap;
}
.margin-left-20 {
margin-left:20px;
}
.color-white{
color: white;
}
/* @media (max-width: 767px) {
.main-container {
padding: 0;
}
} */
</style>
</head>
<body>
<section class="main-container">
<div class="header-icon"><img src="./Group 4254.svg" class="width-100"></div>
<div class="lato-bold">Package Purchase Successful!</div>
<div class="font-size-21 margin-top-60">Hi <span class="lato-bolder" th:text="${invoiceName}"></span></div>
<div class="font-size-18 margin-top-20">You have successfully purchased the <span class="lato-bolder" th:text="${planName}">SUPERSAVER</span> package.</div>
<div class="font-size-18"> Package details can be found below.</div>
<div class="margin-top-20 font-size-18 lato-bolder">Simplify Office Commute with GetToWork.</div>
<div class="font-size-18 lato-bolder">Enjoy Stress-free work days. </div>
<hr class="margin-top-30 width-100-percent">
<section id="packageDetails" class="width-80-percent margin-top-30 margin-bottom-30">
<div class="flex-justify-space-around font-size-18">
<div class="flex-column">
<span class="lato-bolder maroon-bg">Package Name</span>
<span th:text="${planName}" class="margin-top-30">SUPERSAVER</span>
</div>
<div class="flex-column">
<span class="lato-bolder maroon-bg">Rides/Validity</span>
<div class="margin-top-30">
<span th:text="${planBooking}">10 Rides/</span>
<span th:text="${planDays}">90 Days</span>
</div>
</div>
<div class="flex-column">
<span class="lato-bolder maroon-bg">Cost</span>
<div class="margin-top-30">₹<span th:text="${invoicePrice}">200</span></div>
</div>
</div>
<!-- <div class="flex-justify-space-around font-size-18 margin-top-30">
<span th:text="${planName}">SuperSaver</span>
<div>
<span th:text="${planBooking}">10 Rides/</span>
<span th:text="${planDays}">90 Days</span>
</div>
<div>₹ <span th:text="${invoicePrice}">200</div>
</div> -->
</section>
<hr class="width-100-percent">
<section>
<div class="margin-top-30 margin-bottom-30">
<img src="./Shape.svg">
<span class="dashed-border"></span>
<img src="./Group 2224.svg">
</div>
<div class="margin-bottom-20 flex-justify-space-between lato-bolder">
<span>Home</span>
<!-- <span class="visibilty-hide"></span> -->
<span>Office</span>
</div>
<div class="margin-bottom-30 flex-justify-space-between">
<span class="width-150">Infosys Pvt Ltd, Electronic City, Bangalore </span>
<!-- <span class="visibilty-hide"></span> -->
<span class="width-150 justify-flex-end flex">MoveInsync , 17th Cross, HSR Laypot, Bangalore</span>
</div>
</section>
</section>
<footer>
<div class="footerIcons">
<div class="flex-justify-space-between">
<a class="color-white" target="_blank" href="https://www.linkedin.com/company/14637641/admin/">
<img src="./Group 3013.svg" />
</a>
<a class="color-white margin-left-20" target="_blank" href="https://twitter.com/GetToWork6">
<img src="./Group 3012.svg" />
</a>
<a class="color-white margin-left-20" target="_blank" href="https://www.instagram.com/Get_To_Work_MIS/">
<img src="./Group 3015.svg" />
</a>
<a class="color-white margin-left-20" target="_blank" href="https://www.facebook.com/Get-To-Work-1391007324386201/">
<img src="./Path 611.svg" />
</a>
</div>
<div class="flex-justify-space-between margin-top-20">
<p style="font-size: 14px;" class="color-white">Copyright © MoveinSync Technology Solutions Pvt Ltd</p>
</div>
<div class="flex-justify-space-between" style="font-size: 14px;">
<a class="color-white" target="_blank" href="http://gettowork.io">
gettowork.io
</a>
<a class="color-white margin-left-20" href="">
Privacy Policy
</a>
<a class="color-white margin-left-20" href="">
Terms and Conditions
</a>
<a class="color-white margin-left-20" href="">
Help & FAQs
</a>
</div>
</div>
</footer>
</body>
</html>