CODEWITHSUNDEEP
htmlcss
11lll
11lll

Reputation: 19

my html page looks weird when I use phone view

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 class="header"  >
<a href="<cfoutput>#root#</cfoutput>">
    <img src="pictures/title-img-no-fade.png" style="max-height: 12vh;left:50%;"/>
</a>

<div class="links" >
    <div class="link" style="left:20%">
        <a href=""><b>INDIVIDUALS/<br>ENTHUSIASTS</b></a>
        <div class="options" style="padding: 16px 26px";            
            <a href="" >LOGIN/JOIN</a>              
            <a href="" >CHANGE <br>MAKERS</a>               
        </div>
    </div>
    <div class="link" style="right:10%">
        <a href=""><b>BUSINESSES/<br>ORGANIZATIONS</b></a>
        <div class="options" 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%;}

Upvotes: 0

Views: 163

Answers (2)

Sayantan
Sayantan

Reputation: 173

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/

Upvotes: 1

Jarvis
Jarvis

Reputation: 91

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

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

Upvotes: 0

Related Questions