Hasit Mistry Hasit Mistry - 1 month ago 14
CSS Question

Image at top of webpage gets cut on mobile

I am making a website where I have a logo at the top. It all works fine until I try the website on a smaller screen (iPhone 6 or iPhone SE). The logo on top gets cut off for some reason. My constraints are that I want everything centered (vertically and horizontally). I was briefly able to find a solution by removing How do I solve this?

Here is what I have so far:



html,
body {
height: 100%;
}

body {
font-family: 'Noto Sans', sans-serif;
background-color: #fafafa;
color: #294455;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}

@media screen and (max-width: 375px) {
body {
align-items: top;
}
}

.container {
text-align: center;
margin: 2em;
width: auto;
}

.heading {
margin-bottom: 2em;
}

.heading img {
margin: 0;
}

.heading h1 {
font-size: 4em;
font-weight: bolder;
margin: 0;
}

.heading h2 {
font-size: 1.2em;
margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
<title>Sample Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
</head>

<body>
<div class="container">
<div class="heading">
<img src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/image-128.png" alt="GHJobs Subscribe">
<h1>Sample website</h1>
<h2>Blah blah blah subtitle.</h2>
</div>
<div class="message" hidden></div>
<div class="spinner" hidden>
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div class="form">
<form id="subscribeUser">
<input type="email" class="email" name="email" placeholder="Enter your email address">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
<div class="strip">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>

</html>





UPDATE
I put in a media query for max-width of 375px (according to comments and answer), but nothing changed. What am I doing wrong?

Answer

Add a media query to your CSS so that the body will align to the top when the window shrinks. Currently, your body is being center aligned and it's causing the top to be cut.

I believe the media query you want is something like this:

@media screen and (max-width: 375px) {
  body {
    align-items: flex-start;
  }
}
Comments