Trying to make my site responsive on all devices especially on mobile phones-CodePudding

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.

CodePudding user response：

Adding a simple <meta name="viewport" content="width=device-width, initial-scale=1"> should help add some scaling fixes.

CodePudding user response：

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  ></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