This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I have read in this site about a minor but annoying problem, a small gap before the actual content of my web page begins, but none of the solutions have worked for me.
I have set all elements with 0 padding and 0 margin by default, but still something might be causing overflow.
This is my css file:
*{
box-sizing: border-box;
margin:0px;
padding:0px;
font-family: sans-serif;
}
//some global variables here
body{
background-color: var(--brand-white);
color:var(--brand-light-gray);
}
.header-landing{
align-items: center;
justify-content: space-between;
padding:0 10px 0 10px;
margin:15px 10px 0 10px;
}
.header-nav{
display: flex;
justify-content: center;
}
.header-nav > li{
display:inline;
list-style: none;
padding:0 10px 0 10px;
}
.header-logo{
display: inherit;
justify-content: center;
}
.main-content{
background-color: var(--brand-light-gray-2);
width: 100%;
}
the html file:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>nomihub</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<section class="main-content">
<div class="header-landing flex-grid">
<picture class="header-logo col-2">
<h2>LOGO</h2>
</picture>
<div class="col-8">
<ul class="header-nav">
<li>Características</li>
<li>Precio</li>
<li>Partners</li>
<li>Recursos</li>
</ul>
</div>
<div class="col-2">
<button class="btn-default">
INGRESAR
</button>
</div>
</div>
<div class="main-content-welcome">
<div class="welcome-header">
<ul class="welcome-header__list">
<li><h2>Bienvenidos</h2></li>
<li><h1>El software de nomina más simple de todos</h1></li>
<li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li>
<li><button class="btn-default">
ACTIVAR DEMO
</button></li>
</ul>
</div>
<div class="main-content-features">
<div class="welcome-container ">
<div class="circle"></div>
<h3>ENCRIPTACIÓN</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="welcome-container ">
<div class="circle"></div>
<h3>VIGILANCIA</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="welcome-container ">
<div class="circle"></div>
<h3>RESPALDO</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="welcome-container ">
<div class="circle"></div>
<h3>LIMITES ESTRICTOS</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</section>
</body>
</html>
inspecting the elements with firefox, the white is before the actual body.
How I get rid of this gap?
Try removing the top margin in the header .header-landing{margin: 0 10px;}
Your class header-landing has a margin of 15 from the top, that causes the text to be moved down.
Edit: for those kinds of problems in the future, go into inspect mode, chose the most left option called "chose an element on the page", then you can hover over elements and see their margins and paddings. Once you know what you want to look at, click on it and you can see it's CSS properties
Related
How to have bigger gaps between columns in row in Bootstrap 4? I tried everything but its not centered good. Need that gaps to have centered columns. Because its looked awful.
Image Example:
https://i.stack.imgur.com/1Bkkp.png
Code :
<section id="footer">
<div class="container">
<div class="row">
<div class="col-4">
<h1>TEST</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-4">
<h1>TEST</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-4">
<h1>TEST</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
</div>
</div>
</div>
</section>
I think you want to like this ...??
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" >
<title>Hello, world!</title>
</head>
<body>
<section >
<div class="container " >
<div class="row d-flex justify-content-center " >
<div class="col-4 border " >
<h1>TEST</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-4 border">
<h1>TEST</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-4 border">
<h1>TEST</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
First example:
create a row ( <div class="row"> ).
add the desired number of columns (tags with appropriate col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should always add up to 12 for each row.
I'm using Bootstrap cards and I want to separate them by a 2px margin.
Nonetheless, when I apply it (either with Bootstrap's margin classes or directly on my stylesheet) flex-wrap triggers and a card goes one row down.
How could I deal with this behavior?
Should I give a max-width to the cards?
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
margin: 3px;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
h2,
.card {
margin-top: 20px;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="highlights row">
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.
I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.
col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.
With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.
I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row w-100 m-0 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
</div>
</section>
Here, You can used Gutters class in the Bootstrap grid system.
Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.
You can use g-1, g-2, g-3, g-4, and g-5 in row according to your needs.
.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row justify-content-center g-1">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
</div>
</section>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I will try my best to explain better. So i am in school for web designer and we did course of html thats all good now in css that we are done. We got homework to doo, we have to code 2 pages of our website that we are working on page Contact us and About us , i have done page contact us. Now i need to do page about us and i can't do the text over the images becuase i don't know how i tryed something with in box and stuff like that but it didnt work, now here is my page of that site so as you can see we are using diferent classes for boxes and for division to get them in the same row so answers shloud be something like our code as it dosen't fit in our code and i get something completly diferent. Text over the picture shloud look like this We have to make that in css and html. We can't make picture in ps and put text over the image.
/* CSS */
/* RESET ************************************************************************************************** */
*{box-sizing:border-box;
margin:0;
padding:0;}
/* PRAVILA ZA OSNOVNO UREĐIVANJA HTML ELEMENATA *************************************************************** */
body{background-color:#b1b1b1;
color:white;
font-family:"Trebuchet MS", sans-serif;}
h1,h2,h3,h4,h5,h5,.text{font-family: 'Racing Sans One', cursive;
font-weight:lighter;}
h1,h2,h3,h4,h5,h5,h6,p,ul,ol,dl,li,dt,dd{margin-bottom:1em;}
ul{list-style-type:none; /* disc */}
a{text-decoration:none;
color:#2d2d2e;}
a:hover{color:orange !important;}
img,video{max-width:100%;
height:auto;}
a img:hover{opacity:0.5;}
/* HELPERS **************** */
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.align-justify{text-align:justify;}
/* LAYOUT ********************************************************************************************************* */
#page-footer, #content, #menu, #banner{padding:1rem;}
#page-header, #page-footer{background-color:#acacac;
color:white;}
.wrapper{max-width:1200px;
margin:0 auto;
/* border:4px dashed red; */}
.col{float:left;
margin-right:2%;}
.col:last-child{margin-right:0;}
.col-3{width:23.5%}
.col-4{width:32%;}
.col-6{width:49%;}
.col-8{width:66%;}
.clearfix:after{content:"";
clear:both;
display:block;}
.row{margin-bottom:1rem;}
.row:last-child{margin-bottom:0;}
/* MENU ********************************************************************************************************** */
/* IZBORNIK */
#menu li{display:inline;
margin-right:2rem;}
#menu a{ /* font-weight:bold; */
font-size:1.5rem; /* 24 / 16 =1.5rem */
color:white;}
#menu ul{margin-bottom:0;}
/* TRAŽILICA */
#search-icon{width:1.5rem;
vertical-align:middle;}
#s{width:90%;
padding:3px;}
/* BANNER ***************************************************************************************************** */
#banner{background:url(slike/header.jpg)center bottom/cover no-repeat;
height:40vh; /* 440px / 1080px *100 =40.7% == 40.7vh */}
#banner h1{font-size:6rem; /* 96px / 16px =6rem*/}
/* #PAGE-FOOTER **************************************************************************************************************************** */
#page-footer a{margin:0 1rem;}
/* O NAMA ************************************************************************************** */
.text {
display: inline-block;
padding: 0.3rem 1rem;
/* fine tune this to adjust the box's dimensions */
height: 100%;
color: #fff;
background-color: #555;
border: 1px solid white;
}
/* KONTAKT ************************************************** */
.font{font-size:1rem;
margin-right:2rem;}
#btn{padding:4px 9rem;}
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Ziga">
<title>O nama-Avanturust</title>
<link href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header id="page-header">
<nav id="menu">
<div class="wrapper clearfix">
<div class="col col-8">
<ul>
<li>Naslovnica</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
</div>
<!-- .col end -->
<div class="col col-4">
<form action="" name="search-form" id="search-form">
<input type="text" name="s" id="s">
<input type="image" src="slike/search.png" alt="search" id="search-icon">
</form>
</div>
<!-- .col end -->
</div>
<!-- .wrapper end -->
</nav>
<!-- #menu end -->
<div id="banner">
<div class="wrapper">
<h1>AVANTURIST</h1>
</div>
<!-- .wrapper end -->
</div>
<!-- #banner end -->
</header>
<!-- #page-header end -->
<main id="content">
<div class="wrapper clearfix">
<section id="primary" class="col col-8">
<h2>O nama</h2>
<h3>Naš stručni team</h3>
<div class="clearfix">
<div class="col col-3">
<p class="text">Maja Majić</p>
<img src="slike/lica/maja.svg" alt="Maja Majić">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<!-- .col -->
<div class="col col-3">
<p class="text">Pero Perić</p>
<img src="slike/lica/pero.svg" alt="Pero">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<!-- .col -->
<div class="col col-3">
<p class="text">Mirko i Slavko</p>
<img src="slike/lica/mirko.svg" alt="Mirko">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<!-- .col -->
<div class="col col-3">
<p class="text">Ivan Ivanović</p>
<img src="slike/lica/ivan.svg" alt="Ivan">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<!-- .col -->
</div>
</section>
<!-- #primary end -->
<aside id="sidebar" class="col col-4">
<h2>Last minute</h2>
<ul>
<li>Lorem ipsum sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum sit </li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum</li>
</ul>
<h2>Ponuda mjeseca</h2>
<video src="video/promo.mp4" controls></video>
</aside>
<!-- #sidebar end -->
</div>
<!-- .wrapper end -->
</main>
<!-- #content end -->
<footer id="page-footer">
<div class="wrapper">
<h1>AVANTURIST</h1>
<div class="row clearfix">
<div class="col col-4">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<!-- .col end -->
<div class="col col-4 align-center">
<a href="https://facebook.com" target="_blank">
<img src="slike/facebook.png" alt="facebook">
</a>
<a href="https://instagram.com" target="_blank">
<img src="slike/instagram.png" alt="insagram">
</a>
<a href="https://twitter.com" target="_blank">
<img src="slike/twitter.png" alt="twitter">
</a>
</div>
<!-- .col end -->
<div class="col col-4 align-right">
<p>AVANTURIST © 2020. </p>
</div>
<!-- .col end -->
</div>
<!-- .row end -->
</div>
<!-- .wrapper end -->
</footer>
<!-- #page-footer end -->
</body>
</html>
Your question lacks a bit of specificity! I would like to ask you to rephrase your question and include more details. I advise you to read the StackOverflow guidelines on how to ask a good question.
That aside, here's a way you could accomplish it using CSS pseudo-elements:
/* applies to the outer box */
.container {
/* flex-direction defaults to row (places elements inside side by side) */
display: flex;
}
/* applies to the inner boxes that contain the spans with texts */
.box {
/* this regulates the distance between the boxes in this case */
margin: 0px 20px;
}
/*
CSS pseudo-elements
generate block elements both before and after the CONTENT of the box (the span)
*/
.box::before,
.box::after {
content: "|";
/* you must ALWAYS provide a textual content to pseudo-elements */
color: transparent;
height: 100%;
display: inline-block;
padding: 3px 0;
background-color: #555;
border: 1px solid white;
}
.text {
display: inline-block;
font-size: 14px;
font-style: italic;
font-family: impact;
padding: 3px 16px;
/* fine tune this to adjust the box's dimensions */
height: 100%;
color: #fff;
background-color: #555;
border: 1px solid white;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="box"><span class="text">text 1</span></div>
<div class="box"><span class="text">text 2</span></div>
<div class="box"><span class="text">text 3</span></div>
<div class="box"><span class="text">text 4</span></div>
</div>
</body>
</html>
I think you need a font, search for the font you want in google and add it like this:
font-family: YOUR FONT
A similar font would be something like Impact. Use that font, or any other using the "font-family" property.
Additionally, to position text over an image, do something like this
<img src="crabnebula.jpg" alt="crabnebula" style = "width:10%;height:10%;">
<p style = "position: absolute;top:5%;left: 5%;transform: translate(-50%, -50%);color:white;">Ok</p>
-FruDe
I have a website: http://marekzurek.hekko24.pl
I'm trying to copy the testimonial photo effect found on this website: http://i.imgur.com/bu3FuPR.png
What should I add to my css to make the image with the class "client-pic" round and small?
HTML:
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonial-list">
<!-- START SINGLE TESTIMONIAL DESIGN AREA -->
<div class="single-testimonial text-center">
<img src="http://1stwebcoder.co m/themes/nexus/nexus/images/client.jpg" alt="client" class="client-pic">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum.</p>
<h2>mark jukarbarg</h2>
<h3>CEO facebook</h3>
</div>
Here is the css you want to add to make that photo round and small
.client-pic {
width: 80px;
height: 80px;
border-radius: 50%;
}
Tip for the future, if you want to scrape code off of other websites, use inspect element browser feature to get to css used on any specific element.
I have kinda complex situation here (at least complex for me). Attached a fiddle to show how I was trying to accomplish this.
I wanted to position the speech bubble in the center of the black line of the yellow image. (shown in fiddle).
Also, when I go down to smaller devices the text flows beneath the speech bubble. (you can re-size the window and see)
All of these must be shown at a 100 vh height meaning, users need not scroll to see the bubble as well as image.
Fiddle Link to show what I was doing
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>
Try this code:
.bubble {
position: relative;
z-index: 1;
/*width: 80%;*/
height: auto;
/* margin-left:12.5%;*/
padding: 5%;
background: #2e3c6f;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
color:darkgrey;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 32px 21px 0;
border-color: #2e3c6f transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -10.5px;
bottom: -32px;
left: 50%;
}
.about_bg {
width: 100%;
height: auto;
}
#about_container {
height: 100vh;
margin-top: 2.5%;
}
#row_about_1 {
height: 80vh;
}
#row_about_2 {
height: 20vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="about_container">
<div class="row" id="row_about_1">
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble">
<div class="abt_txtcontainer">
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p class="abt_maintext">Heading</p>
<p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div>
</div>
<div class="row" id="row_about_2">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive">
</div>
<div class="col-lg-2"></div>
</div>
</div>
Solution:
1) To set bubble arrow in center:
--> Added position absolute and left value 50%, then added margin-left 10.5% (it's the half width of arrow)
2) Overlapping content:
--> Set bubble height auto (which was 80% previously), now when you'll resize browser it'll not get disturbed.
You probably wanted more fluid solution but with media queries you can adjust image size and position bubble from bottom on larger screens. Just add one more step, eg. on screens > 1200px.
To avoid overflowing I would keep min-height of container...
.about-container {
height: 100vh;
min-height: 580px;
}
.about-container .wrap {
position: relative;
height: 100%;
}
.bubble {
background: #2e3c6f;
color: #fff;
position: absolute !important;
bottom: 150px;
left: 0;
padding: 30px;
border-radius: 15px;
z-index: 1;
}
.bubble:after {
position: absolute;
content: '';
top: 100%;
left: 50%;
height: 0;
width: 0;
border: solid transparent;
border-top-color: #2e3c6f;
border-width: 30px;
margin-left: -30px;
}
p:last-child {
margin-bottom: 0;
}
.about-img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 320px;
height: auto;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container about-container">
<div class="wrap">
<div class="col-xs-12 col-md-8 col-md-offset-2 bubble">
<p>Heading</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
<p>Heading</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>Heading</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
</div>
<img src="http://i.imgur.com/5T5N5Vn.png" class="about-img">
</div>
</div>
</body>
</html>