I want that 3 div's are having the same height.
Picture
HTML
.more-bottom {
padding: 4em 0;
background: #DCEDF9;
}
.more-bottom-grids {
margin: 4em 0 4em 0;
height: 10px;
}
.more-bottom-grid-img img {
width: 100%;
}
.more-bottom-grid-info {
background: #FFF;
padding: .5em;
}
.more-bottom-grid-text {
padding: 1em;
}
.more-bottom-grid-text h5 {
margin: 0;
font-size: .875em;
color: #383838;
line-height: 1.8em;
}
.more-bottom-grid-text p {
margin: 1em 0 0 0;
font-size: .875em;
color: #BBBBBB;
line-height: 1.8em;
}
<div class="container">
<div class="more-bottom-grids">
<div class="col-md-4 more-bottom-grid">
<div class="more-bottom-grid-info">
<div class="more-bottom-grid-img" id="experienceutrecht">
<img src="images/ExperienceUtrecht/Attractions/Architecture/8.jpg" alt="" />
</div>
<div class="more-bottom-grid-text">
<h5>Stadhuis</h5>
<p><i class="fa fa-map-marker" aria-hidden="true"></i> Korte Minrebroederstraat 2, 3512 GG Utrecht</p>
</div>
</div>
</div>
<div class="col-md-4 more-bottom-grid">
<div class="more-bottom-grid-info">
<div class="more-bottom-grid-img" id="experienceutrecht">
<img src="images/ExperienceUtrecht/Attractions/Architecture/9.jpg" alt="" />
</div>
<div class="more-bottom-grid-text">
<h5>Stadskantoor</h5>
<p><i class="fa fa-map-marker" aria-hidden="true"></i> Stadsplateau 1, 3521 AZ Utrecht</p>
</div>
</div>
</div>
<div class="col-md-4 more-bottom-grid">
<div class="more-bottom-grid-info">
<div class="more-bottom-grid-img" id="experienceutrecht">
<img src="images/ExperienceUtrecht/Attractions/Architecture/10.jpg" alt="" />
</div>
<div class="more-bottom-grid-text">
<h5>The Wall</h5>
<p><i class="fa fa-map-marker" aria-hidden="true"></i> Hertogswetering 183, 3543 AS Utrecht</p>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
How do I get the same height for these 3 blocks?
This is on my website, so if you want to you can see it live here.
I have tried to change some things by the img with specific height, but it didn't worked yet.
You should user min-height css property for same div something like that
.more-bottom-grid-info {
background: #FFF;
padding: 0.5em;
min-height: 340px;
}
You really only have two options.
Set a min height on each card (the container with white background).
Use flexbox, I'd recommend checking out the card group section over at flexboxpatterns for a detailed walktrough.
Related
I added a footer to my page but for some reason there is a gap between the footer and the ending of the body. I am not sure how to fix this issue. I have made many webpages without this issue.
I have included the HTML and CSS from what I have created. I cannot find any issue with the code I have.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-size: 20px;
font-weight: 300;
margin: 0 0 var(--header-height) 0;
}
section {
margin-top: 3rem;
}
.coloredSection {
background-color: var(--pale-green);
color: white;
}
.container {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.grid {
display: grid;
gap: 1.5rem;
}
<footer id="contact" class="coloredSection contact">
<div class="row align-items-center projects container">
<div>
<h1>Contact Me</h1>
</div>
<div class="contactLinks" id="contacts">
<a
id="profile-link"
href="https://github.com/"
target="_blank"
class="btn contactDetails"><i class="fab fa-github"></i> GitHub</a>
<a
href="https://twitter.com/"
target="_blank"
class="btn contactDetails"><i class="fab fa-twitter"></i> Twitter</a>
<a
href="https://www.linkedin.com/in/"
target="_blank"
class="btn contactDetails"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="mailto:"
class="btn contactDetails"><i class="fas fa-envelope"></i> Email me</a>
</div>
<div class="attribution">
©2022 | Designed and Coded by Kianna Hendricks
</div>
</div>
</footer>
<!-- End Contact -->
</body>
</html>
Image:
It seems you have set a margin-bottom for the body:
var(--header-height)
body {
font-size: 20px;
font-weight: 300;
margin: 0 0 var(--header-height) 0;
}
Change margin to margin:0; and it will work fine.
I figured out the issue. I accidently added the projects class to the contact row div. After removing it, the gap went away.
I'm adjusting the html / css on a hugo theme, but can't find resources on setting text boxes to a uniform height. Image shows current boxes, with height varying according to amount of text.
The text boxes look like:
The theme partial /layouts/partials/service.html looks like this:
{{"<!-- /section title -->" | safeHTML }}
{{ range .Site.Data.service.serviceItem}}
{{"<!-- Single Service Item -->" | safeHTML }}
<article class="col-lg-3 col-md-3 col-12 wow fadeInUp" data-wow-duration="500ms">
<div class="service-block text-center">
<div class="service-icon text-center">
<i class="{{ .icon }}"></i>
</div>
<h3>{{ .title }}</h3>
<p>{{ .content }}</p>
</div>
</article>
{{"<!-- End Single Service Item -->" | safeHTML }}
{{ end }}
and the CSS for the section looks like:
.service-2 .service-item {
border: 1px solid #eee;
margin-bottom: 30px;
padding: 50px 20px;
transition: all 0.3s ease 0s;
}
.service-2 .service-item:hover {
box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
}
.service-2 .service-item:hover i {
background: #fff;
color: #57cbcc;
}
.service-2 .service-item i {
font-size: 30px;
display: inline-block;
background: #57cbcc none repeat scroll 0 0;
border-radius: 30px;
box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
color: #fff;
height: 200px;
line-height: 55px;
margin-bottom: 20px;
width: 55px;
transition: all 0.3s ease 0s;
}
Is there a way to set a fixed height on those text boxes?
You don't need js for this job. Add display: flex to the container of the blocks will do. The shorter children of the container will "grow up" to fit into the container.
.flexcontainer{
display: flex;
}
.flexchild{
border: solid;
word-wrap: break-word;
width: 100px;
}
<div class="flexcontainer">
<div class="flexchild">
<h3>title </h3>
<p>asdf</p>
</div>
<div class="flexchild">
<h3>title </h3>
<p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
</div>
<div class="flexchild">
<h3>title </h3>
<p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
<p>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</p>
</div>
</div>
codepen
I find this flexbox guide to be useful
function getHeight(el) {
var styles = window.getComputedStyle(el);
var height = el.offsetHeight;
var borderTopWidth = parseFloat(styles.borderTopWidth);
var borderBottomWidth = parseFloat(styles.borderBottomWidth);
var paddingTop = parseFloat(styles.paddingTop);
var paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
var heightList = [];
document.querySelectorAll('.service-block').forEach(function(el) {
heightList.push(getHeight(el))
})
var maxHeight = Math.max.apply(Math, heightList);
document.querySelectorAll('.service-block').forEach(function(el) {
el.style.height = maxHeight + "px";
})
.service-block {
width: 100px;
background-color: #eee;
padding: 10px;
}
.service-block p {
word-break: break-all;
}
.col-md-3 {
width: 33%;
float: left;
}
<body>
<div class="row">
<div class="col-md-3">
<div class="service-block text-center">
<div class="service-icon text-center">
<i class="fa fa-star"></i>
</div>
<h3>title</h3>
<p>content</p>
</div>
</div>
<div class="col-md-3">
<div class="service-block text-center">
<div class="service-icon text-center">
<i class="fa fa-star"></i>
</div>
<h3>title</h3>
<p>content.content.content.content.content.content</p>
</div>
</div>
<div class="col-md-3">
<div class="service-block text-center">
<div class="service-icon text-center">
<i class="fa fa-star"></i>
</div>
<h3>title</h3>
<p>content.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.contentcontent.content.content.content.content.content</p>
</div>
</div>
</div>
</body>
This is my way, get the maximum height and set it to each container.
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
I'm trying to align a row class to be stuck to the bottom of an image. I want it to stick to the bottom and not move. I've added a comment as to what section I want to stick. It starts at the footer tag with id #offer.
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
Shop Now
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>
CSS:
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
#offer {
background-color: black;
padding: 40px;
opacity: 0.5;
margin-top: 263px; /* This is what I want to fix. I'm not sure of the code I have to use to position it to make it stick to the bottom and be able to resize-*/
}
#offer i, h2, p {
color: white;
}
#offer i {
font-size: 35px;
}
position: absolute is what you're looking for. You can read more about it here - https://developer.mozilla.org/en-US/docs/Web/CSS/position
Added position: relative to the parent element, and position: absolute; bottom: 0; left: 0; right: 0; to #offer
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#offer {
background-color: rgba(0,0,0,0.5);
padding: 40px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#offer i,
h2,
p {
color: white;
}
#offer i {
font-size: 35px;
}
<div id="ImageMain">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
Shop Now
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>