I'm trying to move this div to the left under the title, but I cant seem to do it with text-align or justify content, those are my usual methods for centering. However, I want this div to move to the left.
my problem
.grid-container {
max-width: 90vw;
}
.section-title {
padding: 1rem 0.5rem;
}
.title_name {
font-size: 3rem;
text-transform: capitalize;
}
.title_underline {
background: #F4D06F;
width: 15rem;
height: 0.25rem;
}
.title_text {
letter-spacing: .1rem;
line-height: 1.5;
margin-top: 1rem;
color: grey;
}
<article class="about-container">
<div class="title">
<h1 class="title_name">our story</h1>
<div class="title_underline"></div>
<p class="title_text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe illo quae ea nulla quas quia eaque omnis maxime tenetur molestiae eveniet at laboriosam provident, quibusdam quo sit expedita similique earum.</p>
</div>
<div class="about_image">
<img src="img/bravo.jpg" class="about_img" alt="about-img">
</div>
</article>
<!--about column 1-->
Actually you don't need a useless extra empty <div>, just a :after pseudo:
.title_name {
font-size: 3rem;
text-transform: capitalize;
}
.title_name:after {
content: "";
display: block;
margin-top: 1rem;
background: #F4D06F;
width: 15rem;
height: 0.25rem;
}
<h1 class="title_name">our story</h1>
<p>Lorem Ipsum</p>
Because it is a div it defaults to display: block;, so you'll need to set it to display: inline-block;.
.title_underline
{
background: #F4D06F;
width: 15rem;
height: 0.25rem;
display: inline-block;
}
Related
so basically I'm creating a fake Italian restaurant site and the images in the img-container wont fit the box, leaving a line below the image. Also, the img-container overflows past the image which I don't want it to do. Any help appreciated.
Here is my code
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap");
/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
background-color: #dee7e7;
font-family: "Open Sans", sans-serif;
}
/* Nav */
nav {
margin-top: -35px;
height: 70px;
background-color: #fff;
margin: 0px 0px 35px 0px;
height: 60px;
padding: 20px;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: #000;
}
nav a:hover {
cursor: pointer;
}
.nav-links {
float: right;
margin-top: -25px;
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.nav-links .current {
font-weight: 700;
text-decoration: underline;
}
.nav-links a {
padding-right: 10px;
font-size: 16px;
text-decoration: none;
color: #000;
font-weight: 400;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links a:visited {
color: #000;
}
header nav h3 {
font-family: "Libre Baskerville", serif;
font-size: 26px;
}
/* Showcase 1 */
.showcase {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 20px;
}
.text-container {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container p {
font-size: 16px;
padding-right: 10px;
}
.btn-primary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #06a77d;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px grey;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container {
background: #c9d7d7;
}
.img-container img {
margin-left: 80px;
overflow: auto;
height: 500px;
}
/* Showcase 2 */
.showcase-2 {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 30px;
background: #192534;
color: #fff;
}
.text-container-2 {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 16px;
order: 1;
}
.text-container-2 h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container-2 p {
font-size: 16px;
padding-right: 10px;
}
.btn-secondary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #cc224e;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px black;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container-2 {
background: #3d5777;
padding-right: -300px;
order: 2;
}
.img-container-2 img {
margin-left: 80px;
max-width: 100%;
height: 510px;
}
.img-good-food img {
float: right;
max-width: 100%;
height: 130px;
margin-right: 20px;
}
.page-title {
text-align: center;
margin-bottom: 30px;
font-family: "Libre Baskerville";
}
.about-container {
place-items: center;
margin: 10px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.about-container p {
font-size: 16px;
padding-right: 10px;
margin-left: 20px;
}
.about-container button {
margin-left: 20px;
}
.menu-text {
text-align: center;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 20px;
}
.menu-container {
display: flex;
justify-content: center;
background: #3d5777;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 20px;
}
.fa-chevron-left {
font-size: 30px;
float: left;
margin-right: 200px;
margin-top: 300px;
color: #fff;
}
.fa-chevron-right {
font-size: 30px;
float: left;
margin-left: 200px;
margin-top: 300px;
color: #fff;
}
.menu-container img {
max-width: 100%;
height: 650px;
margin: 10px;
}
iframe {
margin-top: 40px;
float: right;
margin-right: 100px;
width: 600px;
box-shadow: 1px 1px 1px 1px grey;
}
.contact {
background: #3d5777;
width: 400px;
height: 200px;
color: #fff;
margin-left: 120px;
margin-top: 160px;
place-items: center;
justify-content: center;
padding-top: 30px;
}
.contact p {
margin-bottom: 5px;
}
.fas {
margin-bottom: 5px;
font-size: 16px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
background: #192534;
padding: 10px;
}
footer h2 {
color: #fff;
font-size: 14px;
}
footer a {
color: #8abeff;
}
<header>
<nav>
<a href="">
<h3 class="logo">Chef Italia</h1>
</a>
<div class="nav-links">
<a class="current" href="index.html">Home</a>
About Us
Menu
Contact
</div>
</nav>
</header>
<div class="showcase">
<div class="img-container">
<img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
</div>
<div class="text-container">
<h1>Welcome to Chef Italia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<button class="btn-primary">Find out more</button>
</div>
</div>
</div>
<div class="showcase-2">
<div class="img-container-2">
<img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
</div>
<div class="text-container-2">
<h1>Authentic Italian Food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-secondary">View Our Menu</button>
</div>
</div>
<div class="showcase">
<div class="img-container">
<img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
</div>
<div class="text-container">
<h1>Good Food Awards Winner 2019</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-primary">Find Out More</button>
<div class="img-good-food">
<img src="img/good-food.png" alt="Good Food Awards Logo">
</div>
</div>
</div>
<footer>
<h2>© Chef Italia 2021. Designed and developed with 💙 by Tyler Lechowski</h2>
</footer>
Did you try to just add:
.img-container {
position:relative
}
.img-container img {
height: 100%;
width: 100%;
}
To define image size you can add for example:
.img-container {
position:relative;
width: 200px;
height: 200px;
}
but be sure you add it to .img-container, not .img-container img. In .img-container you define size in pixels but in .img-container img you make it 100% for width and height to fill whole container
Try adding this:
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
height: 100%;
min-width: 100%;
object-fit: cover;
position: absolute;
}
Oveflow hidden to hide any part of the picture that comes outside the container. Object-fit cover to make it cover the container. If you want smaller picture just specify height and width on the container.
I am having a problem with positioning, everything works fine except the last section contactform.
The problem is that when I zoom in, the contactform overlaps on services section.
Here's the code:
.services {
width: 100%;
height: 160vh;
margin: 100px 0;
position: relative;
}
.services-content {
/* position: relative; */
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.services-content h1 {
font-size: 40px;
letter-spacing: 4px;
}
.content-row-one {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
margin-top: 100px;
}
.row-one {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.quality-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.testing-calibration {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.testing-calibration h6 {
font-size: 18px;
text-transform: uppercase;
}
.medical-devices {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.medical-devices h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-two {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-two {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.lead-auditor {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.lead-auditor h6 {
font-size: 18px;
text-transform: uppercase;
}
.project-management {
display: flex;
flex-direction: column;
width: 35%;
height: 24px;
margin: 0px 60px;
}
.project-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.quality-assurance {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-assurance h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-three {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-three {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.document-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.document-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.contactform {
width: 100%;
height: 50vh;
position: relative;
}
.contact {
width: 100%;
height: 100%;
text-align: center;
}
.contact h1 {
font-size: 40px;
letter-spacing: 4px;
}
.contact-content {
width: 70%;
height: 100%;
display: flex;
/* justify-content: center;
text-align: center; */
margin: 0 auto;
/* position: absolute; */
margin-top: 50px;
}
.contact-column-one {
width: 33%;
height: 50%;
}
.contact-column-one .location i {
font-size: 50px;
cursor: pointer;
}
.contact-column-one .location i:hover{
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-one h1 {
font-size: 30px;
}
.contact-column-two {
width: 33%;
height: 50%;
}
.contact-column-two .phone i {
font-size: 50px;
cursor: pointer;
}
.contact-column-two .phone i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-two h1 {
font-size: 30px;
}
.contact-column-three {
width: 33%;
height: 50%;
}
.contact-column-three .email i {
font-size: 50px;
cursor: pointer;
}
.contact-column-three .email i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-three h1 {
font-size: 30px;
}
<section class="services" id="services">
<div class="services-content">
<h1>OUR SERVICES</h1>
<div class="content-row-one">
<div class="row-one">
<div class="quality-management">
<h6>1. Quality Management Systems according to ISO 9000 2015</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="testing-calibration">
<h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="medical-devices">
<h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-two">
<div class="row-two">
<div class="lead-auditor">
<h6>4. Lead Auditor according to ISO 9001</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="project-management">
<h6>5. Project Management</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="quality-assurance">
<h6>6. Quality Assurance</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-three">
<div class="row-three">
<div class="document-management">
<h6>7. Document Management with SharePoint Server</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
</section>
<section class="contactform" id="contactform">
<div class="contact">
<h1>CONTACT US</h1>
<div class="contact-content">
<div class="contact-column-one">
<span class="location">
<i class="material-icons">
place
</i>
</span>
<h1>ADDRESS</h1>
<p>Address</p>
</div>
<div class="contact-column-two">
<span class="phone">
<i class="material-icons">
phone
</i>
</span>
<h1>PHONE</h1>
<p>Phone Number</p>
</div>
<div class="contact-column-three">
<span class="email">
<i class="material-icons">
email
</i>
</span>
<h1>EMAIL</h1>
<p>Email</p>
</div>
</div>
</div>
</section>
I've tried removing position, from absolute to relative and vice versa, but nothing changed.
If you need more code or explanation please feel free to ask.
Thank you for your time!
Here's a photo:
While you have a fixed height for .services it will always overlap when the content total height higher than .services height, instead you could use min-height so if the content height less than 160vh the height will remain 160vh but if the content height more than 160vh then .services height will grow corresponding to the content.
.services {
width: 100%;
min-height: 160vh;
margin: 100px 0;
position: relative;
}
.services-content {
/* position: relative; */
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.services-content h1 {
font-size: 40px;
letter-spacing: 4px;
}
.content-row-one {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
margin-top: 100px;
}
.row-one {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.quality-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.testing-calibration {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.testing-calibration h6 {
font-size: 18px;
text-transform: uppercase;
}
.medical-devices {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.medical-devices h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-two {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-two {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.lead-auditor {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.lead-auditor h6 {
font-size: 18px;
text-transform: uppercase;
}
.project-management {
display: flex;
flex-direction: column;
width: 35%;
height: 24px;
margin: 0px 60px;
}
.project-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.quality-assurance {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.quality-assurance h6 {
font-size: 18px;
text-transform: uppercase;
}
.content-row-three {
width: 90%;
height: 100%;
justify-content: center;
display: flex;
}
.row-three {
display: flex;
width: 85%;
height: 300px;
margin: 20px 30px;
}
.document-management {
display: flex;
flex-direction: column;
width: 35%;
height: 200px;
margin: 0px 60px;
}
.document-management h6 {
font-size: 18px;
text-transform: uppercase;
}
.contactform {
width: 100%;
height: 50vh;
position: relative;
}
.contact {
width: 100%;
height: 100%;
text-align: center;
}
.contact h1 {
font-size: 40px;
letter-spacing: 4px;
}
.contact-content {
width: 70%;
height: 100%;
display: flex;
/* justify-content: center;
text-align: center; */
margin: 0 auto;
/* position: absolute; */
margin-top: 50px;
}
.contact-column-one {
width: 33%;
height: 50%;
}
.contact-column-one .location i {
font-size: 50px;
cursor: pointer;
}
.contact-column-one .location i:hover{
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-one h1 {
font-size: 30px;
}
.contact-column-two {
width: 33%;
height: 50%;
}
.contact-column-two .phone i {
font-size: 50px;
cursor: pointer;
}
.contact-column-two .phone i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-two h1 {
font-size: 30px;
}
.contact-column-three {
width: 33%;
height: 50%;
}
.contact-column-three .email i {
font-size: 50px;
cursor: pointer;
}
.contact-column-three .email i:hover {
color: rgb(19, 112, 233);
transition: .5s;
}
.contact-column-three h1 {
font-size: 30px;
}
<section class="services" id="services">
<div class="services-content">
<h1>OUR SERVICES</h1>
<div class="content-row-one">
<div class="row-one">
<div class="quality-management">
<h6>1. Quality Management Systems according to ISO 9000 2015</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="testing-calibration">
<h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="medical-devices">
<h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-two">
<div class="row-two">
<div class="lead-auditor">
<h6>4. Lead Auditor according to ISO 9001</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="project-management">
<h6>5. Project Management</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
<div class="quality-assurance">
<h6>6. Quality Assurance</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
<div class="content-row-three">
<div class="row-three">
<div class="document-management">
<h6>7. Document Management with SharePoint Server</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
porro
quo perferendis accusamus!</p>
</div>
</div>
</div>
</section>
<section class="contactform" id="contactform">
<div class="contact">
<h1>CONTACT US</h1>
<div class="contact-content">
<div class="contact-column-one">
<span class="location">
<i class="material-icons">
place
</i>
</span>
<h1>ADDRESS</h1>
<p>Address</p>
</div>
<div class="contact-column-two">
<span class="phone">
<i class="material-icons">
phone
</i>
</span>
<h1>PHONE</h1>
<p>Phone Number</p>
</div>
<div class="contact-column-three">
<span class="email">
<i class="material-icons">
email
</i>
</span>
<h1>EMAIL</h1>
<p>Email</p>
</div>
</div>
</div>
</section>
You should set height: auto;
jsfiddle:
https://jsfiddle.net/qhsygpb5/
Explanation: when you set "height: 200px" element height will be 200px no matter how much content contains. Other solution is to add "overflow:hidden;" but than you will not see all content if there is not room. Also you can add "overflow: scroll;" if you want to scroll the content within 200px height.
I have a container that is keeping the content to a max-width of 1200px and want to have a main image that is placed as the background of the .main_prize_section and can expand on bigger screens while staying within the proper aspect ratio. the main wrapper image is like a container for the main content, so it cant appear distorted.
here is the html code
<section class="main_prize_section">
<div class="container">
<div>
<div class="row">
<div class="flex_row">
<div class="col_1_2">
<div>
<h1>TEST HEADER</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quae quo fugit asperiores, aperiam perspiciatis dolores consectetur quam nemo, laudantium et doloribus officia voluptates eveniet optio ad ab quaerat natus!</p>
</div>
<div>
<h2>sub header</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti accusantium molestiae id a quae pariatur? Sequi ipsum quos libero aspernatur tempore molestiae facere, porro, autem perferendis, atque aut earum reiciendis.</p>
</div>
</div>
<div class="col_1_2 main_prize_product"><img src="images/english/prize_images.png" alt="" width="100%"/></div>
</div>
</div>
</div>
</div>
</section>
here is the css code
.container {
max-width: 1200px;
margin: 0 auto;
}
.flex_col {
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
display: -webkit-flex;
display: -moz-box;
display: flex;
}
.flex_row {
display: -webkit-flex;
display: -moz-box;
display: flex;
}
.col_1_2 {
width: 50%;
}
.main_prize_section {
text-align: center;
background: url("../images/prize_background.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
background-position: 50% 50%;
text-align: center;
}
.main_prize_section img {
width: 50%;
margin: 0 auto;
}
.main_prize_section .flex_row {
padding: 2%;
}
.main_prize_section h1 {
color: pink;
font-size: 4rem;
font-weight: 700;
}
.main_prize_section h2 {
color: pink;
font-size: 2.5rem;
font-weight: 700;
}
.main_prize_section .col_1_2 div:nth-child(2) {
padding: 2%;
}
.main_prize_section p:nth-child(2) {
padding: 2%;
}
.main_prize_section p span:nth-child(1) {
color: gold;
}
.main_prize_section p span:nth-child(2) {
color: pink;
}
.main_prize_section p span:nth-child(3) {
color: red;
}
.main_prize_section p span:nth-child(4) {
color: blue;
}
the main wrapper image that bleeds out is 1366x800.
See if this helps you: https://codepen.io/panchroma/pen/jxxoqO
The important bit is the CSS lines 36 - 39
.main_prize_section {
...
background:url("../images/prize_background.png");
background-repeat: no-repeat;
background-size:cover; /* could also be background-size:contain; */
background-position:50% 50%; /* adjust to fit your design and the image */
}
For the background size, use either 'cover' or 'contain', and in combination with the background-position values, find a combination of settings that work for your specific design and image.
Good luck!
When I scale my site down or view on mobile/tablet, there is all of this margin/whitespace on right side and it cuts off text content in #main section. Why is this happening and how can I make it all scale correctly? I have tried overflow hidden on various parts which didn't solve anything and I have tried zeroing out margins and messing with padding. I'm unsure how to make it scale correctly and get rid of that extra margin/space on the right. There isnt much yet, only header, nav and #main section.
Thank you for your help in advance
html:
<body>
<header id="main-header">
<div class="container">
<h1 class="display-4">.Richardson</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul class="my-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="main">
<div class="container">
<div class="col-md-8" id="welcome-text">
<h1 class="display-4">Welcome</h1>
<hr class="rule">
<p><cite>"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</cite></p>
<p>Hey, I'm <span style="font-size: 24px; color: #FFFC31"><strong>Name!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#FFFC31"><strong>Front-End Web Developer</strong></span>. My journey began with <span style="font-size: 24px; color: #FFFC31"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #FFFC31"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned <span style="font-size: 24px; color: #FFFC31"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. <span style="font-size: 24px; color: #FFFC31"><strong>I'm passionate</strong></span> about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.</p>
</div>
</div>
</section>
<section>
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
</section>
css:
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin:auto;
overflow: hidden;
}
img {
min-width: 100%;
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Helvetica", "geneva", sans-serif;
}
p {
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2.5rem;
}
a {
color: #4e0250;
}
a:hover {
text-decoration: none;
background-color: gray;
padding: 10px;
color: #D3D3D3;
border-radius: 20px;
}
#main-header {
background: #4E0250;
color: silver;
text-align: center;
position: sticky;
top: 0;
right: 0;
z-index: 1;
}
#navbar {
text-align: center;
background-color: #D3D3D3;
color: #4e0250;
font-size: 1.4rem;
z-index: 1;
}
#navbar ul {
padding-left: 65px;
}
#navbar ul li {
text-align: center;
list-style: none;
padding-right: 40px;
display: inline;
}
#navbar {
position: fixed;
width: 100%;
}
#navbar .my-nav {
margin: 15px;
}
#main {
padding-top: 5rem;
background: url('../img/headon3.jpg') center center no-repeat;
background-size: cover;
min-height: 757px;
overflow: hidden;
}
#main .container {
margin-top: 55px;
margin-left: 150px;
}
#main #welcome-text {
background-color: rgba(92, 92, 92, 0.9);
color: #D3D3D3;
padding: 0 20px;
border-radius: 10%;
padding-bottom: 5px;
min-width: 40%;
}
#main h1 {
padding-top: 20px;
}
.rule {
border-top: 1px solid floralwhite;
padding-bottom: 10px;
}
Your main issue is you're not letting bootstrap take care of margins padding with rows and columns properly. In order to fix this immediate issue you have two problems:
First,
http://getbootstrap.com/docs/3.3/css/#grid-media-queries
#main .container {
margin-top: 55px;
margin-left: 150px;
}
Is getting in the way. Let the .container class take care of itself. It uses media queries to accurately define the margin-left at different widths. What you've done here is hard code it to always be 150px, and on an iphone that is most of the screen.
Second,
http://getbootstrap.com/docs/3.3/css/#grid
Container > rows > columns.
You are missing a row class here:
<div class="container">
<div class="row">
<div class="col-md-8" id="welcome-text">
I'm trying to:
center a container div which contains 2 inline elements: Another div, and a title.
The title can be any length.
The elements must be next to each other.
The text must be left aligned.
The div must be vertically aligned to the center of text.
This is the aim:
This is what I have so far.
HTML
<div class="container">
<div class="container">
<div class="box"></div>
<h2>This is my title</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
<div class="container">
<div class="box"></div>
<h2>This is another title. It could be any length. Any length at all.</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
</div>
CSS
.container{
width: 80%;
height: auto;
margin: 0 auto;
background-color: rgba(150,100,200,0.8);
text-align: center;
padding: 1em;
p{
text-align: left;
}
}
.box{
display: inline-block;
width: 3em;
height: 3em;
background-color: lightblue;
vertical-align: middle;
}
h2{
display: inline-block;
width: calc(100% - 4em);
margin: 0 auto;
text-align: left;
}
And here it is in a codepen
Help much appreciated.
Here is a solution with display: table.
Edit - Improved
Have a fiddle!
HTML
<div class="container">
<div class="heading">
<div class="box">
<div></div>
</div>
<h2>This is my title</h2>
</div>
<p>Content</p>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.box {
display: table-cell;
vertical-align: middle;
}
.box div {
width: 3em;
height: 3em;
background-color: lightblue;
}
h2 {
display: table-cell;
vertical-align: middle;
padding: 0 0 0 10px;
text-align: center;
max-width: 400px;
}
.heading {
display: table;
margin: 0 auto;
}
p {
text-align: center;
}
Like this?
http://codepen.io/anon/pen/pfbvH?editors=110
I created a class "title-box" and made the square and h2 inside table cells. The light blue square scales with the height of the header:
.title-box {
background-color: rgba(150,100,200,0.8);
margin: 0 auto;
padding: 1em;
display: table;
}
.box{
width: 3em;
height: 3em;
background-color: lightblue;
display: table-cell;
}
h2{
margin: 0 auto;
text-align: left;
display: table-cell;
padding: 10px;
}