Reputation: 41
Trying to center the divs
I am trying to make a responsive website and in one of the parts of the site i have 3 div which i want to display in parallel when the user is watching it from a PC and one after each other vertically when is from a tablet or mobile phone.
I tried with "margin:auto", "text-align" and other properties but i cant figure out how to make the picture and the div above it be in the middle depending on the size of the window.
Right now, i have the code like this.
https://jsfiddle.net/ckd7afv1/
html:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="portfolio2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body>
<div class="body">
<div id="1">
<div class="cProfile" id="1">
<h1>Title<br><hr></h1>
<div class="col-4" id="1">
<h3 id="idAbout">Text</h3>
<span id="idAboutTxt">Bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla,
bla bla bla, bla bla bla, bla bla bla, bla bla bla, </span>
</div>
<div class="col-4" id="1">
<img class="imgYo" src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="ooops!">
</div>
<div class="col-4" id="1">
<div class="cv">
<div class="google">
<a href="https://www.google.com/" target="_blank">
<table>
<tr>
<td><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></td>
<td></img><span>Google</span></td>
</tr>
</table>
</a>
</div>
<div class="dropdown">
<button class="dropbtn">Download</button>
<div class="dropdown-content" style="left:0;">
<a href="1" download>1</a>
<a href="2" download>2</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
/*Contenido*/
/*Responsive Grid*/
[class*="col-"] {
float: left;
}
@media only screen and (min-width: 1200px) {
/* PC: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.cProfile{
margin: 5px 15%;
}
.cProfile h1{
text-align:center;
color:#5882FA;
font-size:54px;
}
.cProfile h3{
color:#5882FA;
font-size:27px;
}
.imgYo{
border-radius:50%;
display: block;
margin: auto;
border: 1px solid #5882FA;
border-radius: 4px;
padding: 5px 5px;
margin: 25px 10px 10px 10px;
width:80%;
height:80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.anchor{
display: block;
height: 90px;
margin-top: -90px;
visibility: hidden;
}
.cv{
padding:20%;
margin:auto;
}
.cv span{
height:50px;
text-align:center;
letter-spacing: 0px;
}
.google a{
text-decoration: none;
font-variant: small-caps;
font-style: bold;
letter-spacing: -1px;
font-size: 30px;
margin:auto;
}
a:link {
color: black;
}
a:visited {
color: black;
}
.google img{
width:50px;
height:50px;
}
/* Dropdown Button */
.dropbtn {
color: black;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
padding:20px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
height:200px;
padding-top:30px;
margin:auto;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #5882FA;
}
At then end, i want something like this:
PC on the left, Tablet and mobile on the right.
Thank you in advance!
Upvotes: 0
Views: 81
Answers (4)
Reputation: 77
Bootstrap would be the best and easiest option here, but if you are looking to understand the magic behind the CSS well here's what you'll need:
@media (min-width: 760px) {
.container {
width: 700px;
}
.col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 100%
}
}
@media (min-width: 980px) {
.container {
width: 930px;
}
.col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 100%
}
}
@media (min-width: 1224px) {
.container {
width: 1100px;
}
}
.container-responsive {
margin-right: auto;
margin-left: auto;
}
/*for PC */
.col-4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.333%;
float: left;
}
/*for tablet and phone */
.col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}<body>
<div id="" class="container container-responsive">
<h1>Title<br><hr></h1>
<section id="1" class="cProfile col-4">
<h3 class="about">Text</h3>
<p class="aboutTxt">Bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla, bla bla bla,</p>
</section>
<div id="1" class="col-4">
<img class="imgYo" src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="ooops!">
</div>
<div class="col-4 cv google" id="1">
<a href="https://www.google.com/" target="_blank"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></img>Google</a>
</div>
<div class="col-4 dropdown">
<button class="dropbtn">Download</button>
<span class="dropdown-content">
<a href="1" download>1</a>
<a href="2" download>2</a>
</span>
</div>
</div>
</body>You'll have to set 3 media queries and define the styles that will be executed when the browser is resized or viewing from a phone or tablet. for the mobile and tablet versions the width of the column would be 100% (no-brainer), but when approaching your PC .col-4 you'll have to divide 100 by the number of designated columns(In your case, 3) giving us 33.333...%. I usually take the decimal point 3 to 4 places out, but it's up to how precise your trying to be.
Also, I must point out that semantics are very important. In your HTML, you have various semantic errors that will make it harder for you to debug or really follow your code when coming back to it at a later time. For example, you use:
<div class="body">
This isn't necessary because there is already a body tag that exists. I recommend that you read HTML5 semantic elements to better understand this. Another thing is you use a table to set the layout for a portion of the document and this is considered bad practice. Read this.
I only posted the code that addresses your question directly, but I know if there were other things wrong with my code I would appreciate someone else pointing them out to me. If you have anymore questions please don't hesitate to ask!
Upvotes: 1
Reputation: 2213
Javi, Bootstrap it's the way to go:
Code: Bootstrap Example
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>SECTION 1</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>SECTION 2</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>SECTION 3</p>
</div>
</div>
</div>
</body>
</html>
Explanation:
The magic comes when you use the classes "col-sm-4" for the divs. Responsive layouts are really amazing with Bootstrap.
Upvotes: 2
Reputation: 119
.imgYo{
border-radius:50%;
display: block;
margin: auto;
border: 1px solid #5882FA;
border-radius: 4px;
padding: 5px 5px;
margin: 25px 10px 10px 10px;
width:80%;
height:80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
You are overwriting the margin: auto; when you define the margins below it. I editted the css to
.imgYo{
border-radius:50%;
display: block;
border: 1px solid #5882FA;
border-radius: 4px;
padding: 5px 5px;
margin-top: 25px;
margin-bottom:10px;
margin-right: auto;
margin-left:auto;
width:80%;
height:80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
and the image centered.
Upvotes: 0
Reputation: 3603
Your code works, you just need a large enough screen to see it work.
I recommend targeting browsers widths 1024px and up (notice the change to the media query)
@media only screen and (min-width: 1024px) {
/* PC: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Upvotes: 0