While creating a website that is meant to be responsive across both desktop and mobile screens, I encountered an issue. The design looks perfect on desktop screens, but when viewed on a mobile screen, it shrinks and doesn't fit properly. I am using Bootstrap version 5 and have tried setting the width to 100%, but it hasn't resolved the problem. Additionally, my web application is built on .NET. How can I fix this issue?
You can see the issue here:
https://i.sstatic.net/ppLH0.png
This is what I expected (iPad version):
https://i.sstatic.net/h1o88.png
Below is the code snippet:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header class="head navigation fixed-top ">
<img />
<nav class="navigation">
<a href="Index">Main Page</a>
<a href="blog">Blog</a>
<a href="https://api.whatsapp.com/send?phone=905304500247&text=&source=&data=">Contact</a>
</nav>
</header>
<br />
<div style="width: 100%; height: 750px; background-color: yellow; ">
<div class="example">
<img style="width: 100%; height: 750px;" class="background-image" src="~/Img/web_site.png">
<div class="overlay-text">
<h1>Welcome to our Web Page</h1>
<p> </p>
</div>
</div>
</div>
<div style="width: 100%; height: 450px; background-color: black; padding-left: 20px; text-align: center; ">
<br />
<br />
<br />
<br />
<br />
<br />
<h2 style="color: white; top: 50%; right: 50%; ">We're happy to be a leading software</h2>
<h2 style="color: white; top: 50%; right: 50%;">company in İstanbul</h2>
<h2 style="color: white; top: 50%; right: 50%;">solutions for today's enterprise companies.</h2>
<br />
<br />
<a href="https://api.whatsapp.com/send?phone=905304500247&text=&source=&data="><button onclick="window.location.href='/Home/login_page'" class="btncomminicate">Contact Us</button></a>
</div>
CSS Code:
@@media only screen and (max-width: 600px) {
.body {
margin: 0;
padding: 0;
}
}
html, body {
margin: 0px;
height: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
.example {
position: relative;
}
.overlay-text {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
text-align: center;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
.head {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
height: 70px;
background-color: #000000;
display: flex;
/* justify-content: center; */
justify-content: center;
align-items: center;
z-index: 99;
}
.navigation a {
position: relative;
font-size: 1.1em;
color: white;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}
.navigation a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: white;
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
transition: transform .5s;
}
.navigation a:hover::after {
transform-origin: left;
transform: scaleX(1);
}
.btncomminicate {
width: 500px;
height: 50px;
background: transparent;
border: 2px solid yellow;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: yellow;
font-weight: 500;
margin-left: 40px;
}
.btncomminicate:hover {
width: 500px;
height: 50px;
background: yellow;
border: 2px solid yellow;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: black;
font-weight: 500;
margin-left: 40px;
}