Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsiveness would be greatly appreciated.
Right now, the website looks terrible when the screen size is reduced. Let's work on fixing that!
Html/bootstrap
<section id="info" class="py-3">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
CSS:
#info{
height: 515px;
width: 732px;
background: #151515 0% 0% no-repeat padding-box;
}
.cyp-para{
padding: 0px 200px;
font-size: 14px;
}
.placeholder{
width: 236px;
height: 283px;
background: grey;
}
.title{
font-size: 38px;
}
.exp{
font-size: 33px;
}