How would I remove a gap between a h1 and p element? I've tried removing the padding and margins with no luck. I'm using the default bootstrap css. Any ideas?
.section1{
background-color: bisque;
}
p, h1 {
margin: 0px;
padding: 0px;
}
<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
</div>
</div>
I've attached a screenshot to this post as it appears correctly when I run the code using stackoverflows 'run snippet' feature.
The page-header bootstrap class is causing the space reset it using:
h1.page-header {
margin: 0;
padding: 0;
}
See demo below:
.section1 {
background-color: bisque;
}
p,
h1 {
margin: 0px;
padding: 0px;
}
h1.page-header {
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
</div>
</div>
Add line-height to h1 class in your CSS. If font size is 26px, just ad 26px line height.
like:
h1.page-header{
font-size:26px;
line-height:26px;
}
Try line-height to it
.section1 {
background-color: bisque;
line-height: 15px;
}
p,
h1 {
margin: 0px;
padding: 0px;
}
.page-header{
margin:0 !important;
padding:0 !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p>
</div>
</div>
</div>
</div>
You need to reset css first. Because Browser has format CSS itself
{
margin: 0px;
padding: 0px;}
Add this above your css file
Related
I have two div's float left and right. In the left div there is an image, and in the right div there are paragraphs. The image in the left div is hidden, when I hover the right div the image should be displayed but I can't do this, there is a problem when I attempt to do this.
.lower-container {
padding: 10px;
width: 100%;
text-align: center;
margin-bottom: -70px;
}
.left-logo-container {
width: 40%;
float: left;
padding: 10px;
padding-top: 0 !important;
}
.left-logo-container img {
width: 250px;
padding-bottom: 50px;
}
.right-para-container {
width: 60%;
float: right;
padding: 10px;
margin-top: -200px;
}
.right-para-container p {
color: white;
text-align: left;
padding-left: 0;
padding-right: 120px;
font-family: oh-whale;
}
.clear:after {
clear: both;
content: "";
display: table;
}
/* Display element on hovering */
.hide {
display: none;
}
.myDIV:hover+.hide {
display: block;
}
<section id="welcome_cryptonic_06">
<div class="container">
<div class="vision-container">
<div class="title-container">
</div>
<div class="lower-container">
<div class="left-logo-container myDIV">
<img src="about_image.png">
</div>
<div class="right-para-container hide">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</section>
<!-- End welcome_cryptonic -->
Here is the solution !
Run the code in a full screen.
.lower-container {
display: flex;
flex-wrap:wrap;
padding:5rem;
height:20%;
}
.left-logo-container {
order:1;
height:20rem !important;
padding:2rem;
}
.left-logo-container img{
height:20rem;
width:auto;
}
.right-para-container {
order:2;
height:25%
color: black;
width:50%;
text-align: left;
font-family: oh-whale;
padding:5rem;
}
.right-para-container p{
border:2px solid grey;
border-radius:2rem;
padding:2rem;
}
#show {
display: none
}
#main:hover + #show {
display: block
}
<section id="welcome_cryptonic_06">
<div class="container">
<div class="vision-container">
<div class="title-container">
</div>
<div class="lower-container">
<div class="right-para-container " id='main'>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
</p>
</div>
<div class="left-logo-container " id='show'>
<img src="https://images.unsplash.com/photo-1655833266283-af4002bf9ebb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
</div>
</div>
</div>
</div>
</section>
I'm trying to align the contents of a row, which is inside of a container, to the top of said row.
This is my current html:
<div class="container">
<div class="row">
<div class="ticket">
<!-- content -->
</div>
</div>
</div>
CSS for ticket:
<style>
.ticket{
border:5px solid black;
border-radius: 15px 50px 30px 5px;
width:20%;
height: fit-content;
display:inline-block;
clear: left;
margin-left:30px;
background-color:#eee;
}
</style>
"row" and "container" are both bootstrap.
Trying to align the 'tickets' with the top (red line)
I've tried using align-content and align-items but neither seem to be doing anything. Any help would be appreciated! Thank you.
You can use align-items: flex-start; in container of tickets.
.ticket {
display:flex;
align-items:flex-start;
}
.tick {
padding:20px;
border:4px solid #000;
margin:50px;
border-radius:0 30px 0 0;
}
<div class="container">
<div class="row">
<div class="ticket">
<div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur!Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus, libero ad dolorum officia error quo, et molestiae fugit placeat maxime ratione vel minus delectus magni. Consequatur!</div>
<div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci suscipit, labore accusamus</div>
<div class="tick">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </div>
</div>
</div>
</div>
Try to use next css code:
.ticket {
display: flex;
}
.item-in-container {
#flex: 1;
}
Uncomment flex: 1; if you want them to have the same width
If you used the default behaviour of bootstrap it's aligned to the top:
.ticket {
height: 100px;
background-color: red;
}
.ticket:nth-child(2) {
height: 70px;
}
.ticket:nth-child(3) {
height: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="ticket col-3 m-3"></div>
<div class="ticket col-3 m-3"></div>
<div class="ticket col-3 m-3"></div>
</div>
</div>
Footer is on right place but the columns in section are overlapping the footer
.columns {
float:left;
width: 22%;
height: 30%;
margin-left:8%;
}
Instead of float:left; I have used display:inline-block; but issue
not resolved this problem is occurring when website displayed on
mobile. When viewed on desktop it's working fine.
Try adding this to your CSS
box-sizing: border-box;
.container {
background: #f4f4f4;
padding: 5%;
margin: 5%;
}
.column1 {
background: #b40404;
padding: 5%;
color: #fff;
}
.column2 {
background: #000;
padding: 5%;
color: #fff;
}
.column3 {
background: #b40404;
padding: 5%;
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="column1">
This is column 1<br><br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus vero labore obcaecati illum reprehenderit incidunt consequatur quidem, id repellendus impedit, quaerat, mollitia ea culpa sint? Totam sunt omnis quis
eaque.
</div>
</div>
<div class="col-md-4">
<div class="column2">
This is column 2<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium mollitia, incidunt accusantium iure eius suscipit fugit tempore veniam deleniti, nulla dolore repudiandae voluptas, eaque architecto ratione recusandae
consectetur officia. Saepe.
</div>
</div>
<div class="col-md-4">
<div class="column3">
This is column 3<br><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis vitae nulla, beatae tenetur ea eaque obcaecati perspiciatis, architecto nemo culpa id non facilis distinctio aliquam. Accusamus voluptatum mollitia perferendis
libero.
</div>
</div>
</div>
</div>
you can use Bootstrap. Use the class container then row and define columns inside it. Like this:
I am trying to solve this problem in many different ways and it is not working.
I have a row of 2 columns. The first column has text that will receive dynamic text. The other column has an image that must adapt its size responsively, no matter the text-content height is. The text column is leading the height of the row-parent div, so, my image-parent div must get the 100% height of that. Is there any solution available that does not use flex-box or JS? I am trying to avoid using flexbox/JS in this case.
This is the result at the moment:
The parent div is high because of a Text that is beside the image on the same row.
PS: I put a height of 100px on the image just to show you. I know I can't use a fix height. How do I make that div that contains the background-image follow the height of the parent-row div independently of the amount of content (text) that it has?
Thank you so much in advance!
Here's my HTML:
<section>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-7 no-padding">
<div class="img-parent"></div>
</div><!-- ./col-xs-12 -->
<div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent">
<h2>My Title</h2>
<h3>My subtitle</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
</div><!-- ./text-parent -->
</div><!-- ./row -->
</div><!-- ./container -->
</section>
And the CSS:
.text-parent{
background-color:lightgrey;
padding:30px;
}
.text-parent h2,
.text-parent h3{
font-weight:600;
text-transform:uppercase;
}
.text-parent h2{
font-size: 45px;
}
.text-parent h3{
max-width:560px;
font-size:20px;
color:#ed1c24;
margin-bottom:40px;
}
.text-parent p{
max-width:500px;
font-size:12px;
line-height:20px;
text-align:justify;
}
.row{
border:3px solid green;
}
.no-padding{
padding:0;
}
.img-parent{
height:100px; /*just to show a little part of the image*/
background-image:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
Hope this will help you :
html
<section>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-7 no-padding"></div>
<!-- ./col-xs-12 -->
<div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent">
<h2>My Title</h2>
<h3>My subtitle</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
</div>
<!-- ./text-parent -->
</div>
<!-- ./row -->
</div>
<!-- ./container -->
</section>
css
.text-parent h3 {
font-weight: 600;
text-transform: uppercase;
}
.text-parent h2 {
font-size: 45px;
}
.text-parent h3 {
max-width: 560px;
font-size: 20px;
color: #ed1c24;
margin-bottom: 40px;
}
.text-parent p {
max-width: 500px;
font-size: 12px;
line-height: 20px;
text-align: justify;
}
.row {
border: 3px solid green;
display: table;
width: 100%;
}
.row > div {
display: table-cell;
float: none;
}
.no-padding {
background-image: url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#media only screen and (max-width: 767px) {
.row > div {
display: block;
}
.no-padding {
padding: 25% 0;
}
.row {
display: block;
width: auto;
}
}
image-size, image-position and image-repeat are not valid CSS properties, you mean background-size, background-position and background-repeat.
Also, you don't need a separate bootstrap row for that, just set it as background for your "text" row and it'll work fine.
.text-parent{
background-color:lightgrey;
padding:30px;
}
.text-parent h2,
.text-parent h3{
font-weight:600;
text-transform:uppercase;
}
.text-parent h2{
font-size: 45px;
}
.text-parent h3{
max-width:560px;
font-size:20px;
color:#ed1c24;
margin-bottom:40px;
}
.text-parent p{
max-width:500px;
font-size:12px;
line-height:20px;
text-align:justify;
}
.row{
border:3px solid green;
}
.no-padding{
padding:0;
}
.img-parent{
background-image:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
<section>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent img-parent"><!-- ADDED img-parent class -->
<h2>My Title</h2>
<h3>My subtitle</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
</div><!-- ./text-parent -->
</div><!-- ./row -->
</div><!-- ./container -->
</section>
First, image-size、image-position and image-repeat should be background-size、background-position and background-repeat。
Now, you can change '.img-parent' to:
.img-parent {
height: 100%;
background:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr") no-repeat center / cover;
}
I created two rows with their respective columns...but part of the content(heading) of the last column sticks out of the div when I scale the page down.
<div class="container">
<!------------------------------------ first section-------------------------------------------------->
<div class="row" id="firstSection">
<div class="col-xs-12">
<span class="glyphicon glyphicon-tree-deciduous"></span>
<h2 class="heading2">Your home away from home</h2>
<h4>Prima luce, cum quibus mons aliud consensu ab eo. Praeterea iter est quasdam res ex<br/>communi.Etiam habetis sem dicantur magna mollis euismod.</h4>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem id in inventore, maiores consequuntur modi? Omnis dolore quam vel. Illo accusantium, porro laudantium saepe necessitatibus id ullam voluptate nihil!<br/></p>
</div>
</div>
<!------------------------------------ end of first section-------------------------------------------------->
<!------------------------------------ second section-------------------------------------------------->
<div class="row" id="secondSection">
<div class="col-lg-6">
<article class="section1">
<span class="glyphicon glyphicon-tree-deciduous"></span>
<h2>BUSINESS TRAVELLER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi! and fre</p>
<button type="button" class="btn btn-default">READ MORE</button>
</article>
</div><!-- end of column --->
<div class="col-lg-6">
<section class="section2">
<span class="glyphicon glyphicon-tree-deciduous"></span>
<h2>ACCOMPANYING A LOVED-ONE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p>
<button type="button" class="btn btn-default">READ MORE</button>
</section>
</div><!-- end of column --->
</div><!-- end of row -->
<!------------------------------------ end of second section------------------------------------------->
</div><!-- end of container -->
The CSS is as it follows
.heading2{
font-family: 'Arizonia', cursive;
font-size: 50px;
text-align: center;
}
#firstSection{
background-color:#ffffff;
margin-left:1px;
margin-right:1px;
padding-top: 120px;
margin-top:-80px;
}
.section1{
background: #ffffff;
padding: 50px;
margin-top:30px;
}
.section2{
background: #ffffff;
padding: 50px;
margin-top:30px;
}
And you can also confirm as my jsfiddle shows
https://jsfiddle.net/Wosley_Alarico/g8xj2yq4/
You can add word-break: break-all; to your .section 2 if you're okay with the title breaking in the middle of any two letters:
.section2{
background: #ffffff;
padding: 50px;
margin-top:30px;
word-break: break-all;
}
However, I would personally rather set the font-size relative to the display width with something like:
.section2 h2 {
font-size: 4vw;
}
Or use media queries to change the font-sizes for different screen widths:
#media (max-width: 500px){
h2 {
//set whatever font-size you want for headers
}
p {
//set font-size for p
}
}
By using #media queries to shrink the text down when the device is smaller.
E.g.
#media screen and (max-width:480px){
h2 {
font-size:14px;
}
}
You could do something like this to break long words
h2 {
word-break: break-word;
}
But that isn't very pretty. A better option is to use media queries to resize the font
#media screen and (max-width: 480px) {
h2 {
font: 12px;
}
}