my html page looks weird when I use phone view-CodePudding

Here is part of my web header code. It looks good when I use my screen. What do I need to change to make the page looks good on the phone? I saw w3school has a code for Media Queries. Do I need to ad some breakpoint to fix is? I have "meta content="width=device-width, initial-scale=1" name="viewport"" in my code as well.

<div   >
<a href="<cfoutput>#root#</cfoutput>">
    <img src="pictures/title-img-no-fade.png" style="max-height: 12vh;left:50%;"/>
</a>

<div  >
    <div  style="left:20%">
        <a href=""><b>INDIVIDUALS/<br>ENTHUSIASTS</b></a>
        <div  style="padding: 16px 26px";            
            <a href="" >LOGIN/JOIN</a>              
            <a href="" >CHANGE <br>MAKERS</a>               
        </div>
    </div>
    <div  style="right:10%">
        <a href=""><b>BUSINESSES/<br>ORGANIZATIONS</b></a>
        <div  style="padding: 16px 26px">            
            <a href="">LOGIN/JOIN</a>               
            <a href="">LEADERNPARD</a>              
            <a href="">IMPACT</a>               
            <a href="">PROCESS</a>              
            <a href="">GREEN <br>DIRECTORY</a>              
        </div>
    </div>
</div>

here is my css code

    .header{
--margin_lr:0em;
background-color: var(--green);
color: white;
margin: 0em;
padding: 1.2em var(--margin_lr);
display: grid;
/*width: calc(100vw - var(--margin_lr)*2);*/
min-height: 1vh;
justify-content: space-around;
align-content: center;
align-items: center;
justify-items: center;
grid-template-columns: 1fr 2fr;
/*width: 100vw;*/}
.header .links{
display: flex;
align-content: center;
justify-content: space-around;
align-items: center;
justify-items: center;
max-width: 55vw;
flex-direction: row;
flex-wrap: wrap;
min-width: 95%;}

CodePudding user response：

add this in your code or master page if you have one

<meta content="width=device-width, initial-scale=1" name="viewport" />

CodePudding user response：

A web page looks different on different screens of varying sizes. Please use media queries to adjust the way you want your web page to look in desktop vs mobiles vs iPads etc.

Refer this link to learn more about media queries. https://css-tricks.com/a-complete-guide-to-css-media-queries/