Issue
Won't Center This is my first independent project.
On my website I have 3 cards that display centrally in-line on desktop view no problem. On mobile view (Google Chrome Dev Tools) they position to the left of the screen. I would like to center them.
@media only screen and (max-width: 600px) {
html,
body {
width: 100%;
height: 100%;
margin: 0px auto;
padding: 0;
overflow-x: hidden;
position: relative;
}
.page2 {
}
.wrap {
display: inline-block;
flex-wrap: wrap;
width: 100%;
display: flex;
justify-content: center;
}
.card {
margin-right: 20px;
width: 400px;
margin-top: 18px;
border-radius: 5px;
}
}
/*desktop display code below*/
.page2 {
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float: left;
margin: 10px;
text-decoration: none;
}
.wrap {
width: 1000px;
margin: auto;
margin-top: 100px;
} <div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3><a href="welcome.html" id="card-link">Welcome</a></h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3><a href="blog.html" id="card-link"> Kyoto</a></h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3><a href="best.html" id="card-link">Best of 2018</a></h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
</div>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="footer">
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="footer_menu_1">
<li><a href="work_with_me.html">Work With Me</a></li>
<li>
<a href="mailto:xxxxxxxxxxx.com">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>I've tried many different methods I just can't figure it out.
UPDATE
Display flex has sorted the problem and the content now appears centrally. But it has caused my footer to jump up the page > image.
My HTML above has been updated to include the footer. What should I include in the CSS?
Solution
When the screen is small the all are center in mobile screen otherwise that display normally
In the .cards class use the flexbox when the screen is small 425px that align in center.
Here is awesome guide on flexbox
.cards {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.card {
width: 222px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin-left: 22px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
@media screen and (max-width: 425px) {
.cards {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card {
width: 300px;
margin-top: 18px;
border-radius: 5px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page2">
<h2>Blog</h2>
<div class="cards">
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div>
</body>
</html>Answered By - Bhautik Chudasama
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.