CODEWITHSUNDEEP
htmlcss
Joseph Kertz
Joseph Kertz

Reputation: 9

Page works on desktop, but the header gets cut off on mobile devices

I'm new here and I am just starting to learn how to code. The entire page is completely random and now I am rambling because overflow wont let me post unless I add more details. I have created a super simple web page, however whenever I load it on a mobile device the right side of the header gets cut off. I just want the mobile version to be confined to the edges of my device.

p{
    margin:20px 20px 20px 20px;
}
ul{
    position:relative;
    width:100%;
    display:inline-flex;
    /*border: 10px solid green;*/
}
li{
    list-style-type: none;
    margin: 0 auto;

}
a{
    text-align: center;
    text-decoration: none;
    color:rgba(7, 102, 7, 1);
}
body{
    background:linear-gradient(black, green);
    background-repeat:no-repeat;
    color:white;
}
html,body{
    margin:0px;
    width:100%;
    height:100%;
    padding:0px;
    overflow-x: hidden;
}
img{
    float:right;
    margin-right:50px;
}
@media screen and (max-width:992px){
    body{ 
        font-size:45px;
    }
}
<header>
    <title> Portfolio</title>
</header>
<body>
    <ul>
        <li><a href='#'>About Me</a></li>
        <li><a href='#'>Credentials</a></li>
        <li><a href='#'>Experience</a></li>
        <li><a href='#'>Why hire me</a></li>
    </ul>
    <img src="/Running/resizekitten.jpg">
    <p>
        Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer 
        purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic 
        tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed 
        pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale 
        chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard 
        sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer 
        purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic 
        tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed 
        pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale 
        chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.
    </p>
</body>

any help would be greatly appreciated!

Upvotes: 0

Views: 2582

Answers (5)

htmldevmate
htmldevmate

Reputation: 58

Here is the code that I edited, Please compare it with the old code.

<!DOCTYPE html> 
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Portfolio</title>

<style>
    
p{
    margin:20px 20px 20px 20px;
}
ul{
    position:relative;
    width:100%;
    display:inline-flex;
    /*border: 10px solid green;*/
}
li{
    list-style-type: none;
    margin: 0 auto;
    
}
a{
    text-align: center;
    text-decoration: none;
    color:rgba(7, 102, 7, 1);
}
body{
    background:linear-gradient(black, green);
    background-repeat:no-repeat;
    color:white;
}
html,body{
    margin:0px;
    width:100%;
    height:100%;
    padding:0px;
    overflow-x: hidden;
}
img{
    float:right;
    margin-right:50px;
}
@media only screen and (max-width: 768px) {
    body{ 
        font-size:16px;
        line-height: 24px;
    }
    .menu ul{
        display: block;
    }
    .menu ul li{
        display: block;
    }
}

</style>
</header>

<body>
<div class="menu">
    <ul>
        <li><a href='#'>About Me</a></li>
        <li><a href='#'>Credentials</a></li>
        <li><a href='#'>Experience</a></li>
        <li><a href='#'>Why hire me</a></li>
    </ul>
</div>

<img src="/Running/resizekitten.jpg">
<p>
    Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer 
    purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic 
    tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed 
    pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale 
    chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard 
    sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer 
    purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic 
    tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale chard beet greens black-eyed 
    pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.Mustard sierra leone bologi kale 
    chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil.
</p>
</body>

Here how its looks on mobile screens. enter image description here

Upvotes: 0

wertons
wertons

Reputation: 24

The header gets cut of because you have fixed size letters, meaning the size does not scale with the screen, if you want to see the same content in diferent size screens, you can either:

  • Use relative font sizes, such as REM which do scale with device resolution. w3schools CSS Units
  • Make sure overflow is not hidden, so that the text that overflows goes into another line. To do this use text-overflow rules. w3schools Text Overflow. You also have the rule overflow-x: hidden; which actively disables the overflow. Also note that the text-overflow rules usually require the containers to have a fixed size.

And you may also see in other answers, if you wish to make any kind of responsive page you will need the following meta tag in your head tag:

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

Also recomend that you check up w3Schools a great site for learning how to make webpages.

Upvotes: 0

Vaibhav
Vaibhav

Reputation: 602

First of all, remove overflow-x: hidden; from the HTML and body. This will chop off the content if it isn't fitting the screen. And the reason why your website doesn't fit the mobile devices is that you haven't made your website responsive. You have to make your website responsive so that it looks good no matter what the screen size is.

You have to add media queries to make the website responsive. These media queries decide how your website looks when the screen size is decreased or increased. Refer here.

Also, make this a practice to all <meta name="viewport" content="width=device-width, initial-scale=1"> to the head tag of your HTML because without this, your website will not become responsive.

Upvotes: 1

Johannes
Johannes

Reputation: 67798

Use a smaller font first of all, font-size:45px; for body on smaller devices is completely unrealistic.

And don't forget the viewport meta tag - no responsiveness without that. (<meta name="viewport" content="width=device-width, initial-scale=1"> in the <head>)

Upvotes: 0

Razvan Constantin
Razvan Constantin

Reputation: 30

Use positions, margin, padding and justify, dont use height and widht, these gonna disturb your design on others devices.
Also try to use CSSin other folder or in style tag. Btw, use so:

<!doctype> 
<html>
<head> 
<meta charset="UTF-8> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>
<body> 
/* And here write the rest of code */

Upvotes: 0

Related Questions