I'm trying to make my site responsive on all devices especially on mobile phones but I cannot figure out how to make it. I had tried different break points also but it doesn't work. Suggest me some way to make it responsive.
Adding a simple <meta name="viewport" content="width=device-width, initial-scale=1"> should help add some scaling fixes.
You have many ways, two of them are :
Option 1: Pure CSS
By using @media you can determine browser size and write different CSS for different browser sizes
@media only screen and (min-width:768px){
Selector{
Prop: Value;
}
}
Option 2:
You can use a responsive CSS library like Bootstrap and use its grid layout,
BS Considers every container element like every division as 12 columns and you can set different columns for different devices
<div class="col-12 col-md-6" ></div>
For example in this short code, i said my division should take all 12 possible columns of Bootstrap, BUT, it should take only 6 columns(half of the page) in medium devices (md) Which in bs(up to Version 5) are devices larger than 768px