.header {
margin: 0 auto;
text-align: center
}
<div class="header">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h1>
<h3>
Duis dictum eget lacus nec molestie Integer non nisl leo
</h3>
<h5>
Quisque eu luctus tellus. Mauris et dictum ante
</h5>
</div>
when I run this in my browser,
my h1element has 16.080 px of margin on the top and bottom
my h3element has 14.040 px of margin on the top and bottom
my h5element has 16.633 px of margin on the top and bottom
The result I want is this:
.title {
margin: 0;
text-align: center;
}
<div class="header">
<h1 class="title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h1>
<h3 class="title">
Duis dictum eget lacus nec molestie Integer non nisl leo
</h3>
<h5 class="title">
Quisque eu luctus tellus. Mauris et dictum ante
</h5>
</div>
This gives me the result I want, but I do not want to have the class="title" for all my helements.
How do I do this WITHOUT USING three class="title"s?
Headings tags (h1, h2, h3 etc) come with default styles. See here - https://www.w3schools.com/cssref/css_default_values.asp
One of the default styles is margin. You can easily remove this with css.
<!DOCTYPE html>
<html>
<head>
<style>
.header {
text-align: center
}
h1, h3, h5 {
margin: 0;
}
</style>
</head>
<body>
<div class="header">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h1>
<h3>
Duis dictum eget lacus nec molestie Integer non nisl leo
</h3>
<h5>
Quisque eu luctus tellus. Mauris et dictum ante
</h5>
</div>
</body>
</html>
Inside your CSS use:
h1 {
margin: 0 auto;
text-align: center;
}
Related
There is some unexpected behaviour of paragraphs inside a flexbox. This only happens on chrome mobile when checking 'request desktop site' or when you are in the developer tools in chrome and turn on 'device toolbar' and set the device size to something small (like 320x500).
For an example, see the following html:
<html>
<head>
<meta name="viewport" content="width=980">
<style>
p {
border: solid red 1px;
font-size: 16px;
}
</style>
</head>
<body>
<p>These should be the same size</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<p>These should be the same size</p>
<div style="width: 830px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
</div>
</div>
</body>
</html>
Expected behaviour: all the font sizes should be the same. This is clearly not the case, see screenshot.
However, when removing one line from the 'Lorem ipsum' paragraph everthing becomes the same small size (which is also what I expected in the previous example).
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum.</p>
Is there something wrong in this code, is this a browser bug or maybe something in the html/css specification? I only tested this in chrome on android and chrome on windows 10.
use text-size-adjust
<html>
<head>
<meta name="viewport" content="width=980">
<style>
p {
border: solid red 1px;
font-size: 16px;
text-size-adjust:100%;
}
</style>
</head>
<body>
<p>These should be the same size</p>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<p>These should be the same size</p>
<div style="width: 830px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
</div>
</div>
</body>
</html>
I have implemented a layout using css Grid.
The left column should only scroll and the right one should be sticky or fixed.
It's working fine but the scrollbar break the design.
Can scrollbar be removed or any other solution?
I know that is native of the browser but what can I do? (I also tried to change the design but its now supported by Firefox)
.container {
height: 100vh;
display: grid;
grid-template-areas: "list content";
grid-template-columns: 150px 1fr;
grid-template-rows: auto;
color: white;
}
.container .list {
overflow: auto;
grid-area: list;
background-color: #131418;
padding: 20px;
}
.container .list .items {
margin-top: 15px;
display: block;
}
.container .content {
grid-area: content;
background-color: #15161b;
padding: 15px;
position: sticky;
}
<div class="container">
<div class="list">
<h5>
Items
</h5>
<div class="items">
<div class="item">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
<div class="item" style="margin-top: 15px;">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
</div>
</div>
<div class="content">
<h1>
Hello world
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
</div>
</div>
A possible solution is to improve scrollbar's look.
Take a look at
perfect-scrollbar for example.
Perfect-scrollbar will only be displayed when mouse is hover related DIV.
Demo screenshot
(Look at the right very tiny scrollbar)
author's JSFiddle demo
var ps = new PerfectScrollbar('.container');
Your code snippet resolved
var ps = new PerfectScrollbar('.list');
.container {
height: 100vh;
display: grid;
grid-template-areas: "list content";
grid-template-columns: 150px 1fr;
grid-template-rows: auto;
color: white;
}
.container .list {
overflow: auto;
grid-area: list;
background-color: #131418;
padding: 20px;
}
.container .list .items {
margin-top: 15px;
display: block;
}
.container .content {
grid-area: content;
background-color: #15161b;
padding: 15px;
position: sticky;
}
<link href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="container">
<div class="list">
<h5>
Items
</h5>
<div class="items">
<div class="item">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
<div class="item" style="margin-top: 15px;">
<small>User name</small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
<small>Made by ...</small>
</div>
</div>
</div>
<div class="content">
<h1>
Hello world
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit.
</p>
</div>
</div>
I'm struggling to achieve responsive column. Currently all columns are not the same height. When the screen gets smaller, the paragraphs are not the same level, I am trying to make them the same level no matter what screen size. My next problem is the button will also not be the same level in all columns.
Bellow is currently my HTML:
<div class="container">
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" /> <h2>Fencing and Gates</h2>
<h2>test heading text long</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text longer </h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text longer longer </h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>Block Paved Driveways and Paths</h2>
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. Maecenas id leo at elit vestibulum sagittis at in ex. Cras vulputate laoreet dictum. Vestibulum nec quam placerat, blandit orci in, hendrerit ante. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
<div class="section">
<img src="http://via.placeholder.com/500x400" alt="" width="400" height="300" style="max-width:90%;height:auto;" />
<h2>test heading text</h2 >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum faucibus turpis, sed blandit mauris bibendum sit amet. Praesent congue enim at orci dapibus accumsan. </p>
Learn more
</div>
</div>
Below is my CSS:
.container:after { /*clear float*/
content: "";
display: table;
width: 100%;
clear: both;
}
.container {
margin-left: 100px;
margin-right: 100px;
text-align: center;
padding-top: 30px;
}
.section {
float: left;
width: 33.3333%;
padding-bottom: 50px;
border: 1px solid;
box-sizing: border-box;
display: table-cell;
}
.section p {
padding-bottom: 50px;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 19px;
padding-left: 25px;
padding-right: 25px;
}
.section h2 {
text-align: center;
font-family: "Slabo 27px", serif;
font-size: 24px;
font-weight: 700;
text-align: center;
padding-left: 25px;
padding-right: 25px;
}
#media (max-width: 768px) {
.section {
float: none;
width: auto;
}
}
below is a js fiddle of what I currently have
https://jsfiddle.net/b147rmdh/
Any help on this would be greatly appreciated!
You need to specify a height for each column for them to all be the same height. If you don't then the columns will size themselves based on the amount of content they contain (which is currently what is happening in your code). More specifically relating to your code, if you add a specific height to your .section class, then all the columns should be the same height.
Once you have done this, you could use absolute positioning on all of the elements within the columns (the headers, paragraphs, buttons, etc) so that they all line up. If you aren't very familiar with absolute positioning and the position property in general, here is a great reference that explains positioning well. Definitely recommend giving it a read and taking the time to get a good understanding of positioning since it's one of the most fundamental CSS skills.
I'd suggest a Flexbox with wrapping.
.container {
display: flex;
flex-wrap: wrap;
}
.section {
width: 33.3333%;
}
Once you've done that, you can use a similar method vertically if you wrap the upper content in one element and keep the button separate. Set your flex-direction to column and justify-content to space-between.
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
h1{
text-align: center;
font-weight: bold;
}
h3{
color: #09423f;
}
p{
color: black;
}
#works{
max-width: 100%;
height: auto;
border: 0;
}
<h1>HOW IT WORKS</h1>
<div class="row">
<div class="col-xs-4">
<img src="img/create.svg" class="img-responsive" id="works" alt="create">
<h3><b>CREATE YOUR IDEAS</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut.</p>
</div>
<div class="col-xs-4">
<img src="img/sell.svg" class="img-responsive" id="works" alt="sell">
<h3><b>POST IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut </p>
</div>
<div class="col-xs-4">
<img src="img/earn.svg" class="img-responsive" id="works" alt="earn">
<h3><b>EARN IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut</p>
</div>
</div>
I want to try to align all three images with caption in one line. I try float: left but all three didn't work. I try other way too but it remains same. Please help me. You give me right answer I would click green tick.
add this
.col-xs-4{
width: 33.33%;
}
.col-xs-4 img{
text-align: center;
margin: 0 auto;
}
You haven't attached your bootsrap CDN's though you was using Bootstrap like col-xs-4, attach it and then you Boxes will align perfectly horizontal
Bootstrap CDN attach this at the <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
and remove following class which is unnecessary
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
CodePen: http://codepen.io/anon/pen/graKZe
I have attached a bootstrap cdn in your code.
And because of the clear:both in your (.col-xs-4) inside CSS you could not align them horizontally.
plunker copy attached: enter link description here
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
I'm trying to setup a section of my page with 3 columns using Flexbox.
The 3 columns are set up just fine, the issue I am having is with the section1 div not being as tall as the children elements.
I have tried height: auto, height:100%, overflow: auto, overflow:visible, etc. The only time the section1 div changes height is when I specifically state a pixel height. It seems as though the flexbox items are acting as floats so I tried a clear:both to no avail.
I have searched both stackoverflow and other sites and have not found an answer which leads me to believe it is something I am doing wrong with flexbox.
body {
background: lightgrey;
}
.body {
position: relative;
width: 75% /* 747.75px */;
margin: auto;
top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
display: block;
position: relative;
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
left: 2.5%;
}
.section1 {
position: relative;
display: flex;
justify-content: space-around;
top: 5em;
height: auto;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
See Relative positioning
Once a box has been laid out according to the normal flow or
floated, it may be shifted relative to this position. This is called
relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1
were not offset and B2 is not re-positioned after B1's offset is
applied. This implies that relative positioning may cause boxes to
overlap.
Here you don't want to shift a single box, you want it to push following content too. Then, you should use margins for that.
body {
background: lightgrey;
}
.body {
width: 75% /* 747.75px */;
margin: auto;
margin-top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
margin-left: 2.5%;
}
.section1 {
display: flex;
justify-content: space-around;
margin-top: 5em;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>