I have a page layout that I would like to make responsive. The page is currently split 50/50 down the middle vertically. I achieved this by making the Section div display as a table and the divs inside as cells. I also have an absolute positioned Title at the top-center of the page.
I would like to make is such that when the page is viewed on a smaller screen (e.g. tablet or mobile) the 50/50 split becomes horizontal, with all of the contained text centered horizontally and vertically, and with the Title remaining at the top-center of the page.
Here is my code:
html,
body,
section,
div {
height: 100%;
}
body {
color: #000000;
font-family: Cinzel, serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
div {
width: 50%;
padding: 1rem;
}
h1 {
font-size: 1.75rem;
}
.logo {
text-align: center;
color: red;
position: absolute;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.left-half {
background: #FFFFFF;
color: #000000;
}
.right-half {
background: #000000;
color: #FFFFFF;
}
<body>
<section class="container">
<header class="logo">
<h1>Title</h1>
</header>
<div class="left-half cell">
<h1>First Half</h1>
</div>
<div class="right-half cell">
<h1>Second Half</h1>
</div>
</section>
</body>
Any help would be greatly appreciated.
Use media queries for smaller screens in which you change display: tableand display: table-cell to display: block in .container and .cell.
And definitely erase that div { width: 50%; } rule - that affects ALL divs, which you certainly won't want! (Write that 50% width into the .cell rule instead, and add a media query rule for it for smaller sizes that makes it 100%.
Related
My code is here: https://jsfiddle.net/yaphurt0/8/
I tried to get rid of the rest of the webpage to show just the necessary section, but it ended up not displaying correctly, and I couldn't figure out why for the life of me.
Regardless, I've trimmed away what I could and marked in comments in the css file the relevant code.
My problem is that I am trying to display 3 boxes at the bottom of the page next to each other. As the window shrinks I use a media query to increase the width of the boxes so there are 2 per line, and then 1 if the the window shrinks further. Of course this means the boxes take up more room vertically, meaning they spill out as the parent div doesn't scale with it.
I have tried overflow: auto; to #me, however this just added a scrollbar to the content, when instead I want the #me to scale accordingly to contain its children. This is a pretty big problem which is stumping me, as you can see from the main text ("Hi I'm Danny..."), that also suffers from the same issues if the webpage is made very wide and shallow.
As much as I'm looking for a solution, I'm really hoping for an explanation so I can understand why the webpage is behaving as it is/what makes the parent scale, so in the future I don't just copy and paste and hope.
#me {
width: 100%;
height: 45%;
background-color: white;
}
#me .container {
width: 60%;
height: 100%;
margin: 0 auto;
}
#me .container .introduction {
height: 30%;
margin-bottom: 5%;
}
#me .container .introduction .title,
.subInfo {
width: 80%;
color: #262626;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid orange;
}
#me .container .introduction .title {
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 4vw;
}
#me .container .introduction .subInfo {
text-align: center;
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 2vw;
}
#me .container .infoBody {
width: 100%;
height: 50%;
min-height: 75px;
margin: 0 auto;
}
#me .container .infoBody .columnInfo {
float: left;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 31.5%;
margin: 2px;
background-color: orange;
border: 2px solid #e8eaed;
border-radius: 5px;
}
#media only screen and (min-width: 500px) and (max-width: 1000px) {
.minimalHeading {
font-size: 5.5vw;
}
#me .container .infoBody .columnInfo {
width: 48.5%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 4vw;
}
}
#media only screen and (max-width: 500px) {
.minimalHeading {
font-size: 7.5vw;
}
#me .container .infoBody .columnInfo {
width: 90%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 5vw;
}
}
<div id="me">
<div class="container">
<div class="introduction">
<p class="title">My Skillset</p>
<p class="subInfo">The standard Web-development stuff</p>
</div>
<div class="infoBody">
<div class="columnInfo">Hi</div>
<div class="columnInfo">There</div>
<div class="columnInfo">You!</div>
</div>
</div>
</div>
The problem is in float:left property of the .columnInfo element and the height: 45% of #me element. If you remove those, you will see that #me will contain all three .columnInfo elements, but they will be stacked on top of each other. You can use display:flex on the .infobody to make them wrap next to each other. You will have to give your .columninfo elements an absolute height though.
You can use flex, like mentioned. Or simply add a clear to infoBody, like so:
// html
<div class="infoBody clear">
//css
.clear::after {
content: '';
display: table;
clear: both;
}
The problem is your .columnInfo. Elements with the float property are no longer part of the normal flow of the page, so the containing div doesn't know how high they are. The clear solves this problem by adding a hidden pseudo element below those columns and forcing the containing div down.
I have main div and inside that i have 3 divs and each have individual width in percentage. So i got divs with 20%, 80% and 100% respectively.
Working with them so far i realised that if I have given then width of 200% all together then it divide browser width in two equal parts and first half is considered 100% and other one 100%. Then rest of percentage distribution happens. I am new to CSS but want to make this clear. Is my understanding correct and that's why my code is working correctly? Is there any disadvantage of doing so?
.main {
font-size: larger;
font-weight: bold;
}
.column1 {
position: relative;
line-height: 30px;
width: 20%;
text-align: left;
}
.column2 {
width: 80%;
}
.column3 {
position: relative;
width: 100%;
float: right;
text-align: right;
}
.clear-both {
clear: both;
}
.row {
border-width: 2px;
border-bottom-color: #f4f4f4;
border-style: none;
position: relative;
line-height: 30px;
border-bottom-style: solid;
margin-top: 0.2%;
font-weight: normal;
font-size: 12px;
display: flex;
}
<div class="row main">
<div class="column1">CODE</div>
<div class="column2 ">NAME</div>
<div class="column3">TOTAL</div>
</div>
if you use flexbox, it makes it clearer for you instead of using floats mixed with position,
body {
margin: 0
}
.main {
font-size: larger;
font-weight: bold;
display: flex;
flex-wrap: wrap;
}
.column1 {
flex: 0 20%;
background: red
}
.column2 {
flex: 0 80%;
background: green
}
.column3 {
flex: 0 100%;
background: yellow
}
<div class="main">
<div class="column1">CODE</div>
<div class="column2 ">NAME</div>
<div class="column3">TOTAL</div>
</div>
EDIT OP's comment
I want these 3 columns to be in one row. Working with my code too but
total width of main div is 200%. is there any possibility of breaking
of ui if i do it in this way
You can do this way:
body {
margin: 0
}
.main {
font-size: larger;
font-weight: bold;
display: flex
}
.column1,
.column3 {
flex: 0 20%;
background: yellow
}
.column2 {
flex: 1;
background: green
}
<div class="main">
<div class="column1">CODE</div>
<div class="column2 ">NAME</div>
<div class="column3">TOTAL</div>
</div>
You are doing wrong.
Keep following things in mind.
1- Parent/ main div should have appropriate width in percent or pixels. if you don't assign a width then it will take width automatically depending on contents of width.
2- If you are assigning width in percent to child divs (column1, column2 etc) then total of child divs should not exceed 100%. If it exceeds then you will not get desired/appropriate results.
3- You need to use floats or display:inline-block to place all child divs/elements in one row.
.main {
font-size: larger;
font-weight: bold;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.column1 {
position: relative;
line-height: 30px;
width: 20%;
text-align: left;
float: left;
}
.column2 {
width: 60%;
float: left;
}
.column3 {
position: relative;
width: 20%;
text-align: right;
float: left;
}
<div class="row main">
<div class="column1">CODE</div>
<div class="column2 ">NAME</div>
<div class="column3">TOTAL</div>
</div>
If you are using padding or borders then you may need to use
box-sizing: border-box.
You can use bootstrap grid system.
Grid systems are used for creating page layouts through a series of
rows and columns that house your content.
So you can easily manage your layout depending on which device you are using :
.col-lg* classes refer to large sized devices.
.col-md* classes refer to medium sized devices .
.col-xs* classes refer to small sized devices.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-xs-2 bg-warning">CODE</div>
<div class="col-md-10 col-xs-10 bg-primary">NAME</div>
<div class="col-md-12 col-xs-12 bg-success">TOTAL</div>
</div>
I've managed to use the preceding <span> method of centering items, which is all well, except for one little tiny issue illustrated in this image: http://imgur.com/UoKFW6P
how do i fix this? here is my css and html:
* {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
}
#font-face {
font-family: myfirstfont;
src: url(century-gothic.ttf);
}
body,
html {
height: 100%;
white-space: -0.125em;
background-color: rgb(0, 0, 0);
}
#wrapper {
height: inherit;
min-height: 100%;
}
.O1-3 {
color: white;
width: 100%;
height: 33.5%;
display: inline-block;
text-align: center;
font-family: myfirstfont;
}
div span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
div a {
font-size: 35px;
display: inline-block;
font-style: italic;
text-decoration: none;
}
#media screen and (min-width:600px) {
.O1-3 {
height: inherit;
width: 33.3%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div class="O1-3" id="one">
<span></span>
<a id="n-textonly">Luis Rojas</a>
</div>
<div class="O1-3" id="two">
<span></span>
<a id="c-textonly">Contact</a>
</div>
<div class="O1-3" id="three">
<span></span>
<a id="rw-textonly">Recent Work</a>
</div>
</div>
</body>
</html>
There are multiple methods of centering in css, but without a definitive height, you're confined to a just few methods. Here are a few techniques I put together and commented out for you to take a look at: https://jsfiddle.net/73mtxgcc/3/
There are other techniques such as using flex or using display:table, but I find those, personally, either sloppy or not quite supported enough. As well, if you have something relative to the window, then you can always also use
.element{
display: inline-block;
margin: 0 auto;
}
with .element being the parent of the content you'd like to center.
If you have any more questions, or if you need any further clarifications, then please don't hesitate to ask!
You want to give all three columns the same padding with auto width, to get the text to be evenly spaced, then the wrapper centers the entire group. You get same amount of space on each side of the group, and then equal spacing in-between, so the center column ends up not being in the exact center of the page, but it has a very balanced visual effect for the page as a whole. You still need some adjustments with break-points though, I added one.
#wrapper {
width: auto;
height: inherit;
min-height: 100%;
}
.O1-3 {
padding: 1em;
color: white;
width: auto;
height: 33.5%;
display: inline-block;
text-align: center;
font-family: myfirstfont;
}
#media screen and (min-width:600px) {
.O1-3 {
padding: 2em;
height: inherit;
}
}
#media screen and (min-width:1000px) {
.O1-3 {
padding: 5em;
}
}
When it comes to formatting HTML content with CSS, you should really use Flexbox. It is becoming really popular and is widely supported. In the code below, I have added a display: flex; property to your #wrapper. This creates a flex-box out of the wrapper. From there, I added a flex-direction of row, which will automatically format it's three child elements horizontally. In the media query, I have changed the flex-direction property so that the wrapper's child elements are formatted vertically.
-- Hope this helps.
<html>
<head>
<style>
* {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
}
#font-face {
font-family: myfirstfont;
src: url(century-gothic.ttf);
}
body,
html {
height: 100%;
white-space: -0.125em;
background-color: rgb(0, 0, 0);
}
#wrapper {
height: inherit;
min-height: 100%;
display: flex;
flex-direction: row;
}
.O1-3 {
color: white;
width: 100%;
height: 33.5%;
text-align: center;
font-family: myfirstfont;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
div span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
div a {
font-size: 35px;
display: inline-block;
font-style: italic;
text-decoration: none;
}
#media screen and (max-width:600px) {
.O1-3 {
height: inherit;
width: 100%
margin: auto;
}
#wrapper {
flex-direction: column;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div class="O1-3" id="one">
<span></span>
<a id="n-textonly">Luis Rojas</a>
</div>
<div class="O1-3" id="two">
<span></span>
<a id="c-textonly">Contact</a>
</div>
<div class="O1-3" id="three">
<span></span>
<a id="rw-textonly">Recent Work</a>
</div>
</div>
</body>
</html>
I have two divisions next to each other with attribute display: inline-block;; if I increase the height of the second division, the position of the first goes down by the amount I increased the height by, for example - if I add a slogan under my name as seen in this fiddle http://jsfiddle.net/wyorLh6s/1/ the position of the icon/logo goes down.
It's probably really obvious, but it's been a long weekend and I could use a push in the right direction - cheers guys.
.top {
background: #2980b9;
padding: 20px;
padding-left: 200px;
padding-right: 200px;
}
.top .logo {
position: relative;
}
.top .logo .icon {
font-weight: bolder;
color: white;
}
.top .logo .icon {
display: inline-block;
width: 10px;
height: 10px;
padding: 25px;
padding-top: 5px;
padding-bottom: 45px;
border: 3px solid white;
text-align: center;
}
.top .logo .name {
display: inline-block;
color: white;
text-transform: uppercase;
}
<div class="top">
<div class="logo">
<div class="icon">JH</div>
<div class="name">
<div class="title">Jack Hardcastle</div>
<div class="slogan">Slogan Goes Here</div>
</div>
</div>
</div>
My aim is to have the name inline with the JH in the logo/bordered-text, with the slogan underneath that text, http://jsfiddle.net/wyorLh6s/1/ can be seen here if the slogan div is removed.
As elements are displayed inline, .icon is affecting .name's baseline (default vertical-align), so you can do the following to change this behaviour:
.name{ vertical-align: top; }
JSFiddle
I am creating a web page with 2 <div>s side by side. Each <div> will have 2 sections.
I want to center them (bring them to the middle of the <div>). I am trying to make this <div> responsive. In the website, 2 <div>s will be in one line, while in mobile one <div> will appear on one line and the other <div> will appear on a second line. I am trying to center the image and text of each section.
How can I accomplish that?
.wrapper {
width: 100%;
overflow: hidden;
}
.wrapper div {
min-height: 45px;
padding: 1px;
}
#one {
background-color: gray;
float: left;
width: 50%;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<div class="wrapper">
<div id="one">
<img src="http://livebodybuilding.com/images/fast-delivery.png" height="26" width="55" style="float:left; margin-top: 6px;" />
<p style=" font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE DELIVERY </strong>ORDERS OVER $100</p>
</div>
<div id="two">
<img src="http://livebodybuilding.com/images/free-gift.png" height="26" width="31" style="float:left; margin-top: 6px;" />
<p style="font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
My fiddle: https://jsfiddle.net/4okxw32v/
First of all, the use of floats in layout design is discouraged. It is generally not a good way of doing things, and usually if you're having a layout issue it comes down to a float problem. Instead you should use the display: inline-block setting. When using inline-block there are a couple of things to take into consideration.
Any white space between elements will be shown. To combat this you can set font-size: 0 on the wrapper and then set font-size: 1rem on the children. This will set the font size in the content to the same size as that of the html selector.
You can prevent line-breaking if you set white-space: nowrap on the parent and then set white-space: initial on the children.
Next instead of adding an image and floating it inside the child you can use the css pseudo element ::before (or css2 :before) on the text container inside the element.
Finally to center the contents use text-align: center on the parent
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
padding: 0px;
margin: 0px;
}
.wrapper {
font-size: 0;
}
.wrapper div {
font-size: 1rem;
min-height: 45px;
padding: 1px;
text-align: center;
font-size: 13px;
color: #fff;
line-height: 1.5;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
display: inline-block;
width: 50%;
}
#one {
background-color: gray;
}
#one p:before {
content: "";
display: inline-block;
width: 4em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/fast-delivery.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#two p:before {
content: "";
display: inline-block;
width: 2.5em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/free-gift.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#media screen and (max-width: 620px) {
.wrapper div {
width: 100%;
}
}
<div class="wrapper">
<div id="one">
<p><strong>FREE DELIVERY</strong> ORDERS OVER $100</p>
</div>
<div id="two">
<p><strong>FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>