How do I get rid of the white bottom padding in the P element that I have labelled the pic with in this code pen with?
I have tried making the padding 0 in it and everything round it but that hasn't worked
Thanks
body {
margin: 60px 60px 60px 60px;
font-size: 100%;
}
h1 {
font-family: lobster, Monospace;
text-align: center;
font-size: 5em;
/* 80px/16=5em */
text-decoration: underline;
margin-bottom: 60px;
border-style: ;
}
blockquote {
font-size: 20px;
font-family: 'Puritan', cursive;
color: black;
}
.img-r {
/* other definitions */
width: 100%;
}
.padding {
padding-top: 0px;
padding-bottom: 0px;
}
li {
font-family: Monospace;
text-align: center;
font-size: 2em;
/* 80px/16=5em */
text-decoration: ;
margin-bottom: 50px;
border-style: ;
word-wrap: break-word;
}
#media (max-width: 700px) {
.jumbotron p {
font-size: 5px;
}
}
.pad {
padding: 0px;
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<h1>
Dame Stephanie "Steve" Shirley
</h1>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9 col-md-6">
<h2 style="color: #645340; text-decoration: underline;" class="text-
center">AboutDame Stephanie "Steve" Shirley </h2>
<ul class="text-center pad">
<li class="text-center"><em>Dame Stephanie "Steve" Shirley
was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em>
</li>
<li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em>
</li>
<li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em>
</li>
<li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em>
</li>
<li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em>
</li>
<li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em>
</li>
<li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em>
</li>
</div>
<div class="col-xs-3 col-md-6">
<div class="thumbnail padding">
<img class="img-responsive img-r center-block padding" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg">
<div>
<p class="text-center">
Dame Stephanie "Steve" Shirley
</p>
</div>
</div>
</div>
</div>
</div>
</div>
This is due to a browser specific rule. Not sure about others, but to get rid of it in Chrome, use:
-webkit-margin-after: 0px;
I'm assuming the rest follow the same vendor prefix pattern, but I haven't tested.
I added this to my css and applied the class to the p element.
It gets rid if the spacing below the p element. But the p element displays bunched up when the window is made smaller, which it didn't do before.
How do I fix that?
.margin {
padding-top: 18px;
line-height: 0;
}
Thanks,
R
Don't have the reputation to comment..
If your intent is just to have the text centered in the p, all these hacky rules aren't needed..Just set a proper line-height and pad however you want;
.jumbotron p {
font-size: 21px;
font-weight: 200;
padding: 0px; /* adjust freely */
margin: 0px;
line-height: 1em;
}
You could just go with only line-height as well, it will stay vertically centered..
Related
I want an image on the left with my article wrapped around the image AND my caption at the bottom. But when I enter my code, it ends up looking like this:
https://i.ibb.co/8Nhk44B/Untitled.png
Notice the caption is up top instead of underneath the image.
How would I correct this? I apologize for the rather ominous topic
.square {}
.square img {
float: left;
padding: 0px 20px 20px 0px;
}
.box {
font-size: x-small;
vertical-align: top;
display: inline-block;
width: 100%;
}
.caption {
font-family: Arial, Helvetica, sans-serif;
display: block;
font-size: x-small;
position: relative;
}
<div class="card">
<h2>
Is this the skull of Mary Magdalene?
</h2>
<h5>Jonathan Milano, May 1, 2021</h5>
<div class="box">
<div class="square">
<a href="post003.html">
<img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on
display in France" />
<p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br> Copyright © 2021 Magdalene Publishing
</p>
</a>
<p>Although Mary Magdalene’s historic existence is still under debate today, Christian text from sources including the New Testament tell us that Mary of Magdala (her home village on the shore of the Sea of Gailee) played a significant role in the
life of Jesus Christ and the foundations of Christianity as it is known today.
<br><br> According to legend, Mary was one of the women that stayed with Jesus even up to crucifixion. She is said to be the first one whom Jesus appeared to after resurrection. Other early Christian texts raise her status even more in that after
the death of Christ she is considered almost an apostle rivaling the status of Saint Peter.</p>
<p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common
version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
</div>
</div>
</div>
One of the options:
add float and width for the .caption
.square {
}
.square img {
float: left;
padding: 0px 20px 20px 0px;
width:50%;
}
.box {
font-size: x-small;
vertical-align: top;
display: inline-block;
width: 100%;
}
.caption {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
position: relative;
float:left;
width:50%;
padding:0 20px 0 0;
}
a{color:#333;}
<div class="card">
<h2>Is this the skull of Mary Magdalene?</h2>
<h5>Jonathan Milano, May 1, 2021</h5>
<div class="box">
<div class="square">
<a href="post003.html">
<img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on
display in France" /><p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br>
Copyright © 2021 <a href="http://www.magdalenepublishing.org/skull-mary-magdalene/" class="ulLink"
target="_blank">Magdalene Publishing</a></p></a>
<p>Although Mary Magdalene’s historic existence is still under debate today, Christian
text from sources including the New Testament tell us that Mary of Magdala
(her home village on the shore of the Sea of Gailee) played a significant role
in the life of Jesus Christ and the foundations of Christianity as it is known today.
<br><br>
According to legend, Mary was one of the women that stayed with Jesus even up to
crucifixion. She is said to be the first one whom Jesus appeared to after resurrection.
Other early Christian texts raise her status even more in that after the death of Christ
she is considered almost an apostle rivaling the status of Saint Peter.</p>
<p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
</div>
</div>
</div>
Another one option:
.square {
}
.square img {
float: left;
padding: 0px 20px 20px 0px;
width:50%;
}
.box {
font-size: x-small;
vertical-align: top;
display: inline-block;
width: 100%;
}
.caption {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
position: relative;
float:left;
width:50%;
padding:0 20px 0 0;
}
a{color:#333;}
<div class="card">
<h2>Is this the skull of Mary Magdalene?</h2>
<div class="box">
<div class="square">
<a href="post003.html">
<img src="https://milanothan.files.wordpress.com/2021/05/disn_d5xcaazpjz-1-1.jpg" width="50%" style="float: left;" alt="Mary Magdalene’s skull on
display in France" /><p class="caption" style="vertical-align: bottom; !important">Mary Magdalene’s supposed skull on display in Southern France.<br>
Copyright © 2021 <a href="http://www.magdalenepublishing.org/skull-mary-magdalene/" class="ulLink"
target="_blank">Magdalene Publishing</a></p></a>
<p>Although Mary Magdalene’s historic existence is still under debate today, Christian
text from sources including the New Testament tell us that Mary of Magdala
(her home village on the shore of the Sea of Gailee) played a significant role
in the life of Jesus Christ and the foundations of Christianity as it is known today.
<br><br>
According to legend, Mary was one of the women that stayed with Jesus even up to
crucifixion. She is said to be the first one whom Jesus appeared to after resurrection.
Other early Christian texts raise her status even more in that after the death of Christ
she is considered almost an apostle rivaling the status of Saint Peter.</p>
<p>The New Testament tells us that the followers of Christ were prosecuted from the Holy Land after his death and many of them were forced out to sea in small ships without sail or rudder where they were left to perish on their own. The most common version of the legend states that Mary Magdalene was sent with Mary Salomé, Mary Jacobé, Martha, Lazarus, Maximin, and their Egyptian servant Sara into one of these ships.</p>
<h5>Jonathan Milano, May 1, 2021</h5>
</div>
</div>
</div>
I've already checked the code on DevTools and it shows the problem:
The icon is actually wider than I would like. I've already tried changing its size, padding, margin, etc, but with no good results. Does anyone know how to solve this problem?
Code can be found here
<a href="#about">
<i class="fa fa-angle-double-down fa-stack-1x" style="color: black";></i>
</a>
element.style {
color: black;
}
.fa, .fas {
font-weight: 900;
font-size: 35px;
}
Remove the .fa-stack-1x class on your icon. That will fix it. That class specifically is setting the width to be 100%. I removed it on my browser and it works fine with out it.
You need to add this css code, this prevent icon to be larger (width) and to be centered (left):
.fa-stack-1x, .fa-stack-2x {
left: inherit !important;
width: auto !important;
}
const projectName = 'tribute-page';
html, body {
height: 100%;
width: 100%;
background-color: black;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
p, h1, h3, h4, cite, ul {
color: #D9D4D0;
font-family: font-family: 'Neucha', cursive;
font-family: 'Open Sans Condensed', sans-serif;;
}
a:link {
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: #D9B384;
text-decoration: none;
}
.header {
width: 100%;
height: 700px;
background: url(https://media.gazetadopovo.com.br/2012/12/7cc68ffc5247e851268670d802a50453-gpMedium.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.text-vertical-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 1px 0 #D9D4D0,
1px 1px 0 #D9D4D0,
1px -1px 0 #D9D4D0;
-1px -1px 0 #D9D4D0;
-webkit-text-fill-color: black;
}
.text-vertical-center h1 {
margin-bottom: 0;
font-size: 80px;
}
.text-vertical-center h3 {
margin-top: 0;
font-size: 25px;
}
element.style {
color: black;
}
.fa, .fas {
font-weight: 900;
font-size: 35px;
}
.fa-stack-1x, .fa-stack-2x {
left:inherit !important;
width: auto !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/39c2eebbd7.js" crossorigin="anonymous"></script>
<title>Tribute to Caetano Veloso</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Neucha&family=Open+Sans+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main">
<header class="header">
<div class="text-vertical-center">
<h1>Caetano Veloso</h1>
<h3 id="subheading">an aging chameleon</h3>
<a href="#about">
<i class="fa fa-angle-double-down fa-stack-1x" style="color: black";></i>
</a>
</div>
</header>
<section id="tribute-info" class="container">
<h3 id="about">These are the main events in Caetano's life:</h3>
<ul>
<li><strong>1942</strong> - Born in Santo Amaro, Bahia, Brazil</li>
<li>
<strong>1959</strong> - Hears for the first time the song Chega de Saudade, by Bossa Nova's father João Gilberto. He later recalled: "It was the clearest landmark a song has ever left in my life"
</li>
<li>
<strong>1963</strong> - First musical work. After impressing the director Álvaro Guimarães with a speech on how João Gilberto revitalized Samba, Caetano is invited to compose the soundtrack to the plays Boca de Ouro, by Nelson Rodrigues, and A Exceção e a Regra, by Bertold Bretch.
</li>
<li>
<strong>1965</strong> - Moves to Rio de Janeiro with his sister Maria Betânia
</li>
<li>
<strong>1967</strong> - Releases, in a partnership with Gal Costa, his first album Domingo.
</li>
<li>
<strong>1967</strong> - Releases his first self-titled solo album, giving birth to the Tropicalist movement, which would change the history of Brazilian music.
</li>
<li>
<strong>1968</strong> - Caetano performs the provocative song É Proibido Proibir with Os Mutantes at the 3ª International Song Festival to a booing crowd. Caetano then improvises an angry, and now historical, speech against the judges and the public.
</li>
<li>
<strong>1968</strong> - Because of his political views, Caetano is sent to jail by the Military Regime.
</li>
<li>
<strong>1969</strong> - Caetano moves to England with his friend Gilberto Gil, where he lives in exile until 1972.
</li>
<li>
<strong>1971</strong> - Releases one of his best albums, the acclaimed Transa, which contained covers and songs with English subtitles.
<li>
<strong>1972</strong> - Returns to Brazil and performs with João Gilberto and Gal Costa at TV Tupi.
</li>
<li>
<strong>1980</strong> - Caetano starts growing in popularity abroad, especially in Portugal, Israel, France and Africa.
</li>
<li>
<strong>1983</strong> - Meets Paula Lavigne, who was 14 years old. She would later become his long-time wife, with whom Caetano had 2 kids.
</li>
<li>
<strong>1990</strong> - Participates in the Montreaux Jazz Festival in Switzerland.
</li>
<li><strong>1991</strong> - Writes a profound article to the New York Times about the cultural implications of Carmem Miranda</li>
<li>
<strong>2002</strong> - Launches a book about the tropicalia movement, Tropical Truth: A Story of Music and Revolution in Brazil.
</li>
<li>
<strong>2010</strong> - The artist becomes a constant meme object on the internet.
</li>
<li>
<strong>2016</strong> - Caetano performs at the Rio Olimpic Games with Anitta.
</li>
<li>
<strong>2020</strong> -
Wins a millionaire judicial dispute against Olavo de Carvalho, the intellectual mentor of the Bolsonaro family
</li>
</ul>
<div id="popular-albums-section" class="container">
<div class="row">
<h3 class="popular-albums-header">Caetano's best albums</h3>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Transa</strong> - 1972</h4>
<img class="album-photo img-responsive" src="images/caetanotransa.png" alt="Transa album cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Qualquer coisa</strong> - 1975</h4>
<img class="album-photo img-responsive" src="images/qualquercoisa.png" alt="Qualquer Coisa album cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Cinema Transcendental</strong> - 1979</h4>
<img class="album-photo img-responsive" src="images/Cinema_Transcendental_cover.png" alt="Cinema Transcendental Cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Bicho</strong> - 1977</h4>
<img class="album-photo img-responsive" src="images/Capa_de_Bicho.png" alt="Bicho album cover">
</div>
<div class="margin-bottom col-sm-6 col-md-3 text-center">
<h4><strong>Cores, Nomes</strong> - 1982</h4>
<img class="album-photo img-responsive" src="images/coresnomescover.png" alt="Cores, Nomes album cover">
</div>
</div>
</div>
<br>
<p>
"When imagined by American critics, the most frequent cliché used about the legendary singer Caetano Veloso is that he is the Bob Dylan of Brazil. In that case, the best Dylan song to associate with Veloso would be "Forever Young," because Veloso is one of the most restlessly creative, forward-looking musicians of our time."
</p>
<cite>-- Author Ed Morales</cite>
</blockquote>
<h3>If you're interested, you should read more about this incredible human being on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Caetano_Veloso" target="_blank">Wikipedia entry</a>.
</h3>
</section>
</main>
</body>
</html>
I've just registered here and I am looking for a little help.
I'm working on my tribute page for free code camp and the bullet points I have are not remaining central when resizing the fluid container.
Does anyone have any ideas?
Here is a link to my code pen so you can take a look code pen
body {
margin: 60px 60px 60px 60px;
font-size: 100%;
}
h1 {
font-family: lobster, Monospace;
text-align: center;
font-size: 5em; /* 80px/16=5em */
text-decoration: underline;
margin-bottom: 60px;
border-style: ;
}
blockquote {
font-size: 20px;
font-family: 'Puritan', cursive;
color: black;
}
.img-r {
/* other definitions */
width:100%;
}
.padding {
padding-top: 20px;
}
li {
font-family: Monospace;
text-align: center;
font-size: 2em; /* 80px/16=5em */
text-decoration: ;
margin-bottom: 60px;
border-style: ;
}
#media (max-width: 700px){
.jumbotron p {
font-size: 5px;
}
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<h1>
Dame Stephanie "Steve" Shirley
</h1>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-9 col-md-6">
<h2 style="color: #645340; text-decoration: underline;" class="text-center">About
Dame Stephanie "Steve" Shirley </h2>
<ul class="text-center">
<li class="text-center"><em>Dame Stephanie "Steve" Shirley was born as Vera Buchthal to a Jewish father, a judge in Dortmund who lost his post to the Nazi regime, and a non-Jewish Viennese mother.</em>
</li>
<li class="text-center"><em>In July 1939, at the age of five, Shirley arrived, together with her nine-year-old sister Renate, to Britain as a Kindertransport child refugee.She was placed in the care of foster parents living in the Midlands town of Sutton Coldfield.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>After leaving school Vera decided not to go to university (botany was the "only science then available to my gender") but sought employment in a mathematics/technical environment. At the age of 18, she became a British citizen and changed her name to Stephanie Brook.</em>
</li>
<li class="text-center"><em>In the 1950s, Stephanie worked at the Post Office Research Station at Dollis Hill, building computers from scratch and writing code in machine language. She took evening classes for six years to obtain an honours degree in mathematics. In 1959, she moved to CDL Ltd, designers of the ICT 1301 computer.</em>
</li>
<li class="text-center"><em>After marriage to a physicist, Derek Shirley, in 1962, Shirley founded, with a capital of £6, the software company Freelance Programmers</em>
</li>
<li class="text-center"><em> She wanted to create job opportunities for women with dependents, and predominantly employed women, with only 3 male programmers in the first 300 staff,[8] until the Sex Discrimination Act 1975 made that practice illegal.</em>
</li>
<li class="text-center"><em>She adopted the name, Steve, to help her in the male-dominated business world.[9] Her team's projects included programming Concorde's black box flight recorder.</em>
</li>
<li class="text-center"><em>Shirley retired in 1993 at the age of 60 and has since focused on her philanthropy.</em>
</li>
<li class="text-center"><em>Shirley was appointed Officer of the Order of the British Empire (OBE) in the 1980 Queen's Birthday Honours, for services to industry and promoted Dame Commander (DBE) in the New Year Honours, 2000 for services to Information Technology.</em>
</li>
</div>
<div class="col-xs-3 col-md-6">
<div class="thumbnail">
<img class="img-responsive img-r center-block" src="https://ichef.bbci.co.uk/images/ic/480xn/p014nf75.jpg">
<div>
<p class="text-center padding">
Dame Stephanie "Steve" Shirley
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Much appreciated,
R
The list is not aligned with the title because the list has a left-padding, as it should, so that the bullets are visible and there's spacing between them and the text. You could either remove the 40 pixels of left padding on the ul.text-center element or add 40 pixels of left-padding to the title.
I am trying to make this page responsive. As you can see when I resize the browser the text is scrunched rather than moving to the bottom of the image. Any help would be greatly appreciated!
Here is my HTML:
<div id="content-wrapper">
<div class="container">
<div class="content">
<div class="line">
<h2 class="text-center exec-header">Executive
Directors</h2>
</div>
<article class="ninecol">
<div class="content-item first cf" id="maja">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/majapic.jpg"
width="250px">
</figure>
<h3 class="name">Maja Miletich</h3>
<h5 class="job-title">CEO</h5>
<div class="description">
<p>Maja Miletich is the CEO of Zip Zap Zop Kids,
LLC. Maja has worked with children on many levels.
Having a brother with Autism has given Maja an
understanding of how powerful communication is for
ALL children. Maja has worked for years as a
teacher where she practices emergent
curriculum.</p>
<p>Maja has studied theater and improv at A.C.T. in
San Francisco as well as graduated from The Second
City Training Center in Hollywood where she studied
improv and sketch comedy.</p>
<p>Maja has her Bachelors Degree in Early Childhood
Education. Maja's focus is on inclusive classrooms
where curriculum is designed to allow children and
young adults to feel comfortable expressing
themselves in whichever way they feel most
comfortable</p>
<p>Maja believes when we can share with one another
what has been taught then, and only then, are we
actually learning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="april">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/april2.jpg"
width="250px">
</figure>
<h3 class="name">April Miletich</h3>
<h5 class="job-title">CFO</h5>
<div class="description">
<p>April Rasmussen, PhD has been a credentialed
English teacher since 2008 and has taught
everything from advanced placement English language
and composition to literature through film, and
English as a second language support classes. Her
passion is for the art of story and also
storytelling as a tool for student growth. She
holds advanced degrees in education, mythology and
depth-psychology.</p>
</div>
</div>
</article>
</div>
<div class="line">
<h3 class="text-center exec-header">Board of Directors</h3>
</div>
<div class="content-item first cf" id="ari">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/ari.jpg" width=
"250px">
</figure>
<h3 class="name">Ari Schenider</h3>
<h5 class="job-title">President</h5>
<div class="description">
<p>Ari Schneider is a graduate of The Second City
Conservatory and has a (BA) Hons from The Guildford School
of Acting in England. He has been a cast member of the
all-ages improv review The Really Awesome Improv Show
(Voted Best Kid’s Comedy Show) at The Second City in
Hollywood for the past 3 years. He also is affiliated with
the mentorship program, YSF (The Young Screenwriters
Foundation) at New Rhodes as well as teaching afer-school
improv with Zip Zap Zop Kids, LLC.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/debra.jpg" width=
"250px">
</figure>
<h3 class="name">Debra Gliozzi</h3>
<h5 class="job-title">Treasurer</h5>
<div class="description">
<p>Debra Kratochvil Gliozzi is a first generation American
and first in her family to attend college. Her career spans
35 years and two distinct industries. Debra is currently an
administrator and educator in Danville, California. She
brought her MBA and business experience to San Ramon Valley
High School and integrated Business Computers (an ROP
course), Personal Finance and Introduction to Business and
Entrepreneurship into the curriculum. Debra says that her
goal is to equip students with skills that prepare them for
the real world. It is the most important thing I can
do.</p>
<p>This is her second career after transitioning from the
Telecommunications Industry where she held management
positions at Calix Inc., SBC Communications, Pacific Bell,
MCI and Sprint. Her vast experiences included Forecasting,
Accounting, Business Analysis, Market Financials,
Competitive Assessment, Product Development, Product
Marketing, Procurement, Quality Management and Sales
Operations & Planning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/melina.jpg"
width="250px">
</figure>
<h3 class="name">Melina Johnson</h3>
<h5 class="job-title">Secretary</h5>
<div class="description">
<p>Melina Johnson is a self-employed entrepreneur who
created her own home organizing business. Melina is the
mother of two children, her son having Autism. She has
spent countless hours dedicated to researching and
providing her son with the best therapies and services to
help him with his growth and development. Every therapist
and teacher, over the years, has told Melina that her
natural sense of humor has been the best therapy she could
provide to her son - Humor and laughter open up doors to
cognitive and social development. And it’s fun!</p>
<p>Melina’s education has been in the health sciences,
having a degree in Dental Hygiene. After years of hygiene
practice, she decided to create a job for herself that
would utilize her natural organizational skills, and allow
her creativity and fun. Melina continues to grow her home
organizing business and raise her children with a strong
sense of responsibility, and a positive outlook on
life.</p>
</div>
</div>
</div>
</div>
and CSS:
.line {
overflow: hidden;
text-align: center;
}
.exec-header{
margin-top: 15px;
display: inline-block;
padding: 0 15px;
position: relative;
font-family: Roboto Condensed;
font-weight: bold;
font-size: 30px;
}
.content .ninecol {
padding-right: 4.6875%;
padding-left: 4.6875%;
}
.exec-header:before{
right: 100%;
}
.exec-header:before, .exec-header:after {
background: #333333;
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 96%;
}
.content {
overflow: hidden;
margin: 0 auto;
max-width: 1200px;
}
.content-item.first {
padding-top: 0;
background: 0;
overflow:hidden;
}
.content-item {
margin-left: -2.18978%;
margin-right: -2.18978%;
padding: 30px 2.18978%;
}
#maja{
margin-top: 10px;
}
#ari{
margin-top: 10px;
}
.exec-header:after {
left: 100%;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.content-item figure {
}
figure img {
padding-bottom: 14px;
}
.bio-pics {
display: block;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
-moz-user-drag: -moz-none;
-webkit-user-drag: none;
user-drag: none;
}
h3.name {
margin-bottom: .75em;
line-height: 1.2em;
font-family: Roboto Condensed;
font-weight: bold;
}
.content-item figure {
float: left;
margin-right: 5.83942%;
margin-bottom: 0;
}
.content-item .description, .content-item .details {
overflow: hidden;
}
.content-item .description {
min-height: 0;
}
h5.job-title{
font-family: Roboto Condensed;
font-weight: bold;
margin-top: -16px;
}
try by adding float:left ; in description class in css file
it should work also add an display inline-block to div with id=maja
I have a four column footer that works fine until the browser window is shrunk.
The 2nd column(Div ID fourth) then would start push text under one of the other boxes:
It's easier to see on the website: Teetimelawn.com
I tried a few solutions but they usually end up pushing the div for fourth under near the other 3 inline div columns.
Here's the CSS info:
.footer {
background-color: #336600;
clear: both;
float: none;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
height: 350px;
color: #F7F7F7;
min-width: 1400px;
width: 100%;
max-height: 350px;
text-align: center;
display: inline-block;
}
#third {
width: 180px;
float: left;
text-align: left;
margin-left: 10px;
display: inline-block;
margin-right: 5px;
}
#first {
width: 300px;
float: right;
overflow: visible;
margin-right: 10px;
}
#second {
float: right;
margin-right: 10px;
margin-left: 10px;
}
#fourth {
height: 100%;
clear: none;
padding-left: 10px;
padding-right: 10px;
}
Here's the HTML
<div class="footer">
<div id=third>
<h1>Site Map
</h1>
<p1>
<a href="/index.html">Home page
</a> <br>
<a href="/estimate.htm">Estimate Form
</a> <br> <p1>
<a href="/lawncare.html">Lawn Care Process
</a> <br>
<p1>
<a href="/trees.html">Tree And Shrub Control
</a> <br>
<p1><a href="/pestcontrol.html">Pest Control Services
</a> <br>
<p1>Lawn Sprinkler ervice <br>
<p1><a href="/paybal.php">Secure Online Bill Pay
</a> <br>
<p1>
<a href="/careers.html">Careers And Team
</a>
<p1>
<br>
<p1>
<a href="/testimony.html">Customer Testimony And Lawn Gallery
</a>
<br>
</div>
<div id=first><div itemscope itemtype="http://www.schema.org/LocalBusiness">
<h1 itemprop="name">Tee Time Lawn Care</h1>
<br>1566 Frontage Rd
O'Fallon, IL 62269</p1></a>
<br>
<p1 itemprop="telephone">(618) 632-8873<br>(636) 272-8873</p1>
<br>
<br>
<p2 itemprop="description"> A local lawn and landscaping company with an emphasis on safe, organic lawn care. Lawn care companies like us will treat your lawn and yard like a golf course so give us a call if you need the best lawn in your neighborhood. </p2></div>
</div>
<div id=second>
<h1>Lawn care company service in Missouri, Illinois (MO, IL)<br>
St. Louis suburbs including:</h1>
Fairview Heights lawn care, Fairview Heights landscaping<br>
St. Louis lawn care, St. Louis landscaping<br>
Edwardsville lawn care, Edwardsville landscaping<br>
Granite city lawn care, Granite city landscaping<br>
Saint Charles lawn care, Saint Charles landscaping<br>
Belleville lawn care, Belleville landscaping<br>
Collinsville lawn care, Collinsville landscaping<br> O'Fallon lawn care, O'Fallon landscaping<br>
And nearby towns and cities for your yard service needs.<br><br>
</div><div id=fourth>
<h1> Our lawn care and landscaping services include:</h1>
<p2>Organic and granular fertilization, aeration and seeding, pest control, tree and shrub maintenance service, soil conditioning, heat guard, summer recovery, root rejuvenation, winterizing, blanket barrier, mole removal, yard cleaning, lawn and yard mowing, commercial landscaping, weed removal, weed prevention, vole removal, and more!
<br> Please contact us for additional services.</p2>
</div>
<!-- end .footer -->
</div>
Google+
</body>
</html>
Try change the padding in #fourth div id into margin like this:
margin-right: 20px;
margin-left: 10px;
UPDATE : I create This Fiddle for example of my latest comment.