Menu
As in the image my content is working fine in desktop as well as landscape version but not in portrait mode(highlighted in image).The content is overlapping .How to make the content look normal in every device screen?It only happens when my description is long but in other when the descripiton is short overlapping doesnt take place.So how do i maintain constant margin between hte columns ? Thank You
]1
code:
HTML
<!DOCTYPE html>
<div class="container">
<div class="row">
<div class=" col-lg-6 col-md-12 col-sm-12 form-group">
<a href=""><h2>Dtu Feed</h2>
<img src="Images/dtufeed.png" alt="DTU FEED" height="50%"
width="100%">
<p>Social Network platform designed specially for all DTU
students.Containing Dynamically added events by students/society
themselves , a map of college ,various groups like book club,a platform
for voting on general concerns,a separate profiles for all by signing up
through fb,google+ or email and all the extra stuff like notes etc !</p>
</a>
</div>
<div class=" col-lg-6 col-md-12 col-sm-12 form-group">
<a href="http://yat.pythonanywhere.com/"><h2>Blog</h2>
<img src="Images/blog.png" alt="BLOG" height="50%" width="100%">
<p>Created a blog website with features of creating and logging in
a profile,posting and commenting !</p></a>
</div>
<div class=" col-lg-6 col-md-12 col-sm-12 form-group">
<a href="Todo/index.html"><h2>To Do List</h2>
<img src="Images/todo.png" alt="To do list" height="50%"
width="100%">
<p>General to-do list with animations upon hovering deleting and
adding!</p></a>
</div>
<div class=" col-lg-6 col-md-12 col-sm-12 form-group">
<a href="PlayTap/circles.html"><h2>PlayTap</h2>
<img src="Images/playtap.png" alt="PlayTap" height="50%"
width="100%">
<p>Press Keyboard keys to create animaions and sounds !</p></a>
</div>
</div>
</div>
CSS used
body{
padding-top: 5%;
font-family: 'Roboto Slab', serif;
}
h2{
text-transform: uppercase;
font-size: 1.2em;
}
I am using bootstrap4
964
asked Apr 19 '26 12:04
You can use media query for proper responsive design for devices and for define width of device .
check this link it will help you Media query
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
