My question is this: I have one Bootstrap Featurette below another. Both have an image and both have both a header and a paragraph (As you can see here). My problem is that the text on the lower Featurette does not line up horizontally with the image on the higher featurette, and I cannot seem to fix it or find instructions on how to fix it, so I came here for some help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Shop</title>
<link rel="icon" type="image/png" href="images/media-shuffle.png" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- FontAwesome Integration -->
<link rel="stylesheet" href="bootstrap/css/animate.min.css" type="text/css">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
</head>
<style type="text/css">
#font-face {
font-family: 'msemibold';
font-style: normal;
font-weight: normal;
src: url('fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}
#font-face {
font-family: 'mpro';
font-style: normal;
font-weight: normal;
src: url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
}
#font-face {
font-family: 'bebas';
src: url('fonts/bebas/BebasNeueRegular.otf');
}
#font-face {
font-family: 'bebasbold';
src: url('fonts/bebas/BebasNeueBold.otf');
}
#font-face {
font-family: 'sspro';
src: url('fonts/source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: 'ssprobold';
src: url('fonts/source-sans-pro/SourceSansPro-Bold.otf') format('opentype'), url('fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
}
.jumbotron {
background-image: url('images/background.png');
margin-top: 0;
font-family: 'bebasbold';
color: black;
margin-bottom: 5%;
}
.firstheader {
text-align: left;
}
a {
text-decoration: none;
color: #585c65;
}
a:hover {
text-decoration: none;
color: black;
}
body {
background-image: url('images/dark-background.png');
}
.textbody {
color: white;
font-family: arial;
padding-left: 1%;
}
.gamer {
color: white;
font-family: 'bebasbold';
border-color: #585c65;
}
.stream {
color: white;
font-family: 'bebasbold';
}
.featurette-divider {
border-color: #585c65;
margin: 80px;
}
.lead {
font-family: 'mpro';
}
#media (min-width: 992px) {
.container-fluid {
overflow-x: hidden;
white-space: nowrap;
font-family: 'bebasbold';
}
}
</style>
<body>
<div class="jumbotron container-fluid navbar-fixed-top">
<div class="container">
<h1 class="firstheader">The Digital Card Shop <small>. About Us | . Contact Us | . Sell Your Account</small></h1>
</div>
</div>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br>
<div class="container-fluid">
<container class="gamer">
<div class="row featurette">
<div class="col-sm-7 col-sm-push-6">
<h2 class="featurette-heading">Star Wars Card Trader <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p class="lead">Star Wars is awesome. For that reason, <br> it remains one of the most popular subjects for trading cards;<br> Both physically and digitally.
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" src="images/swct.jpeg" height="200px" width="200px" alt="Generic placeholder image">
</div>
</div>
</container>
<hr class="featurette-divider">
<div class="container-fluid">
<container class="gamer">
<div class="row featurette">
<div class="col-sm-7 col-sm-push-2">
<h2 class="featurette-heading">Topps KICK 16 <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p1 class="lead">Football (It isn't called soccer) is awesome. For that reason, <br> It remains one of the most popular subjects for trading cards;<br> Both physically and digitally. (Please add Derby County cards Topps)
</div>
<div class="col-md-5 col-md-pull-1">
<img class="featurette-image img-responsive center-block" src="images/kick.png" height="200px" width="200px" alt="Generic placeholder image">
</div>
</div>
<br></br><br></br><br>
</container>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</html>
Thanks
So this is how your code should look https://jsfiddle.net/2Lzo9vfc/36/
HTML
<div class="container">
<div class="row">
<div class="col-sm-5">
<img class="featurette-image img-responsive center-block" src="http://placehold.it/200x200" height="200px" width="200px" alt="Generic placeholder image">
</div>
<div class="col-sm-7">
<h2 class="featurette-heading">Topps KICK 16 <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolorem totam aliquam dolores amet repellendus aperiam, eligendi illum voluptatem vero.</p>
</div>
</div>
<hr class="featurette-divider">
<div class="row">
<div class="col-sm-7">
<h2 class="featurette-heading">Topps KICK 16 <span class="text-muted">We Buy & Sell Cards.</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolorem totam aliquam dolores amet repellendus aperiam, eligendi illum voluptatem vero.</p>
</div>
<div class="col-sm-5">
<img class="featurette-image img-responsive center-block" src="http://placehold.it/200x200" height="200px" width="200px" alt="Generic placeholder image">
</div>
</div>
</div>
Related
This is how my website looks like in desktop view,
And this is how it looks in mobile view,
The Tags looks perfect in Desktop view but in mobile view it is not able to fit all in a single line. That's why, it is jumping to the new line. The tags #pytorch and #tensorflow is in the new line. I want to avoid this behavior. If it is not able to accommodate all in a single line just hide the the rest of all the Tags in the new line (which means to hide #pytorch and #tensorflow).
Minimum Reproducible code:
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#430&display=swap');
.main {
max-width: 1200px;
margin: 0 auto;
}
.read-more p a span:hover {
color: #0085a1;
}
.title-text:hover {
color: #337ab7;
cursor: pointer;
}
.title-text {
font-family: 'Lato';
font-weight: 700;
font-size: 30px;
color: #404040;
margin-bottom: 10px;
}
.tag p span:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.date {
font-size: 15px;
color: #707070;
margin-left: 15px;
font-family: 'Work Sans';
}
.read {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.author {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.desc p {
font-size: 17px;
font-family: 'Work Sans'
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3e34c14145.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="main" style="padding-top: 3%; padding-bottom: 5%;">
<div class="blog-card">
<div class="row" style="background-color: #fff; padding-top: 1%;">
<div class="col-md-4">
<img src="https://mlthon.pythonanywhere.com/media/guides/img/carbon_2.png"
style="max-width: 100%; height: auto; border-radius: 7px; padding-bottom: 3%;">
</div>
<div class="col-md-8">
<a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none;">
<h1 class="title-text">Loading Really Large Datasets Efficiently With Generators (Pytorch &
TensorFlow)</h1>
</a>
<div class="post-meta" style="text-align: center;">
<div class="row">
<p class="date"> <i class="fas fa-calendar-week" aria-hidden="true"></i> Posted On
May 5, 2022 |</p>
<p class="read"> <i class="fas fa-clock" aria-hidden="true"></i><span
class="span_read"> 10 minutes</span></p>
</div>
</div>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
beatae quia porro id est.</p>
</div>
<div class="read-more" style="float: right;">
<p style="font-family: 'Open Sans'; font-weight: 700; font-size: 18px;"><a
href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none; color: black;"><span>[Read
More]</span></a></p>
</div>
<div class="row" style="padding-top: 1px; overflow: hidden;">
<p style="font-family: 'Open Sans'; font-size: 1rem">Tags:</p>
<!-- THIS IS WHERE PROBLEM STARTS -->
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('deep-learning')">
<span>#deep-learning</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('data')">
<span>#data</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('pytorch')">
<span>#pytorch</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('tensorflow')">
<span>#tensorflow</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you can see, the div has very short width so the Sample 3 and Sample 4 has automatically came down. I want to avoid this behavior and want to hide Sample 3 and Sample 4. So, the desired output should looks like this:
Thanks for your time.
The problem is that the readme block has a float right outside the row, while the row itself has no width. You can add an col-md-12 class within the row to force a full width tag list, but that will push the read more outside.
While I would go for a manually written CSS Flexbox based solution for this problem, with bootstrap you can do something like this:
<div class="row">
<div class="col-md-auto order-md-12">
read more here
</div>
<div class="col-md-auto order-md-1">
tags here
</div>
</div>
This will render read more and tags next to each other on medium and larger displays, and order read more at the very end.
On smaller displays, cols are full width with read more positioned before the tags.
I copied your example where I applied it.
It is not perfect, but getting there. I would advise you however to look at what elements you use. Tags have meaning in HTML; divs are pretty much meaningless. For links, use the <a>-element, not an onclick handler, for lists use <ul><li>; and definitely use <divs> with <p>'s wrapped in it per tag. If you want to take the easy route, a simple list of <a>'s would probably be sufficient for the tags.
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#430&display=swap');
.main {
max-width: 1200px;
margin: 0 auto;
}
.read-more p a span:hover {
color: #0085a1;
}
.title-text:hover {
color: #337ab7;
cursor: pointer;
}
.title-text {
font-family: 'Lato';
font-weight: 700;
font-size: 30px;
color: #404040;
margin-bottom: 10px;
}
.tag p span:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.date {
font-size: 15px;
color: #707070;
margin-left: 15px;
font-family: 'Work Sans';
}
.read {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.author {
font-size: 15px;
color: #707070;
margin-left: 7px;
font-family: 'Work Sans';
}
.desc p {
font-size: 17px;
font-family: 'Work Sans'
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3e34c14145.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="main" style="padding-top: 3%; padding-bottom: 5%;">
<div class="blog-card">
<div class="row" style="background-color: #fff; padding-top: 1%;">
<div class="col-md-4">
<img src="https://mlthon.pythonanywhere.com/media/guides/img/carbon_2.png"
style="max-width: 100%; height: auto; border-radius: 7px; padding-bottom: 3%;">
</div>
<div class="col-md-8">
<a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none;">
<h1 class="title-text">Loading Really Large Datasets Efficiently With Generators (Pytorch &
TensorFlow)</h1>
</a>
<div class="post-meta" style="text-align: center;">
<div class="row">
<p class="date"> <i class="fas fa-calendar-week" aria-hidden="true"></i> Posted On
May 5, 2022 |</p>
<p class="read"> <i class="fas fa-clock" aria-hidden="true"></i><span
class="span_read"> 10 minutes</span></p>
</div>
</div>
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
beatae quia porro id est.</p>
</div>
<div class="row" style="">
<div class="col-md-4 order-md-12">
<div class="read-more" style="float: right;">
<p style="font-family: 'Open Sans'; font-weight: 700; font-size: 18px;"><a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow" style="text-decoration: none; color: black;"><span>[Read
More]</span></a></p>
</div>
</div>
<div class="col-md-8 order-md-1">
<div class="col row"> <p style="font-family: 'Open Sans'; font-size: 1rem">Tags:</p>
<!-- THIS IS WHERE PROBLEM STARTS -->
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('deep-learning')">
<span>#deep-learning</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('data')">
<span>#data</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('pytorch')">
<span>#pytorch</span></p>
</div>
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('tensorflow')">
<span>#tensorflow</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
so I am developing a site so in a section element with some text and images the images are breaking down into some ugly designs so I want it to be in I particular design this is the code if you run it a resize it and then see the images it comes to some random design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>]
<style>
#section2img1 {
width: 100px;
}
#section2img2 {
width: 100px;
padding-left: 129px;
}
#section2img3 {
width: 100px;
padding-left: 129px;
}
#section2img4 {
width: 100px;
padding-left: 129px;
}
#section2img5 {
width: 100px;
padding-left: 129px;
}
#section2img6 {
width: 100px;
padding-left: 129px;
}
</style>
</head>
<body>
<div id="section2">
<h3 id="text1section2">Lorem, ipsum.Lorem ipsum dolor sit.</h3>
<p id="text2section2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum</p>
<img src="/img/SECTION2/WEB_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img1">
<img src="/img/SECTION2/MOBILE_APP_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img2">
<img src="/img/SECTION2/COUSTOMER_PRODUCT_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img3">
<img src="/img/SECTION2/SEO___SMO-removebg-preview.png" alt="error" id="section2img4">
<img src="/img/SECTION2/WEB_DESIGN-removebg-preview.png" alt="error" id="section2img5">
<img src="/img/SECTION2/E-COMMERCE_SOLUTIONS-removebg-preview.png" alt="error" id="section2img6">
</div>
</body>
</html>
the link of the images
https://drive.google.com/drive/folders/1wQHGuoKuFk0fa-9upqiqmAk62ClOVAUS?usp=sharing
please help me
You can use Bootstrap to make your layout responsive. It has a 12 column system and you have 6 images so each image takes up two columns. You can also give it some padding with the "p" class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>]
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
#section2img1 {
width: 100px;
}
#section2img2 {
width: 100px;
}
#section2img3 {
width: 100px;
}
#section2img4 {
width: 100px;
}
#section2img5 {
width: 100px;
}
#section2img6 {
width: 100px;
}
</style>
</head>
<body>
<div id="section2">
<h3 id="text1section2">Lorem, ipsum.Lorem ipsum dolor sit.</h3>
<p id="text2section2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum</p>
<div class="row">
<div class="col-md-2 p-2">
<img src="img/SECTION2/WEB_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img1">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/MOBILE_APP_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img2">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/COUSTOMER_PRODUCT_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img3">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/SEO___SMO-removebg-preview.png" alt="error" id="section2img4">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/WEB_DESIGN-removebg-preview.png" alt="error" id="section2img5">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/E-COMMERCE_SOLUTIONS-removebg-preview.png" alt="error" id="section2img6">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to add about 50px of margin-top to my h1, but when I code it, it makes white space between my background-color and web.
Should I be using padding instead? In the course I am taking by Angela Yu, she is using margin-top.
I'm not sure if you can see the white space in my example, but if you copy and paste the code into CodePen, you should be able to.
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
font-family: 'Sacramento', cursive;
font-size: 5.625rem;
margin-top: 50px;
color: #66BFBF;
}
h2 {
color: #66BFBF;
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
font-weight: normal;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #11999E;
}
a {
color: #11999E;
}
.top-container {
background-color: #E4F9F5;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My site</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="ico" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="images/cloud.png" alt="Cloude ing">
<h1>I'm Rudakov</h1>
<h2>a programmer</h2>
<img class="bottom-cloud" src="images/cloud.png" alt="Cloud image">
<img src="images/mountain.png" alt="Mountain image">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/Profile.png" alt="my picture">
<h2>Hello.</h2>
<p>I am a web developer. I love tea and outdoor activities.</p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="Skill-picture1" src="images/Skill picture 3.png" alt="skill picture1">
<h3>Desing and Development</h3>
<p> Great knowledge in this area, helps me to come to the solution of problems much faster</p>
</div>
<div class="skill-row">
<img class="Skill-picture2" src="images/bull.png" alt="skill picture2">
<h3>Sociability</h3>
<p>I can find a common language with any person.</p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>Lorem ipsum dolor sit amet, non elit.</h3>
<p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
<a class="btn" href="mailto:jen90_0#yahoo.com">CONTACT ME</a>
</div>
</div>
You should use padding instead of margin as described by CSS's Box Model.
.top-container h1 {
margin-top: 0;
padding-top: 50px;
}
The content of the testimonial page keeps acting funny each time I try to centralise it on the page. I have tried setting the margin of the .content to 25% auto; but each time I try to tweak the background image becomes so large and still does not centralise.
I also have this bug on my home page where the background image shrinks and shows some white space cant seem to figure the problem
THE HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:title" name="" content="">
<meta property="og:url" name="" content="">
<meta property="og:image" name="" content="">
<meta property="og:type" name="" content="">
<meta property="og:keywords" name="" content="">
<meta property="og:description" name="description"
content="No 1,Hospitality management and luxury company in New York USA.We offer our expertise with love in Event Planning and Production, Restaurant sales and consulting and Memorial and Funeral Services.">
<title>Hill and Boyd - Home Page</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
</head>
<body>
<!-- HOME PAGE CONTENT-->
<div class="hb-page">
<section id="navigation">
<header>
<div class="mobile">
<a class="js-nav.toggle hb-nav-toggle" onclick="open">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</a>
</div>
</header>
<div class="navbar whitebg" id="navbar">
<aside id="hb-aside">
<nav id="menu" class="centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</nav>
</aside>
</div>
</section>
<section class="home-page">
<div id="main">
<aside id="home-page" class="">
<div class="slideshow-container">
<div class="home-page-slides">
<img class="" src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt">Luxury Events</h6>
<h2 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt fontlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt omnis quod iste temporibus suscipit nostrum asperiores voluptatem. Provident maiores qui officia tempore, eos veritatis, obcaecati!</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img class="" src="Images/restaurantbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt ">Creating Impact</h6>
<h2 class="blacktxt"> WE PROVIDE STRATEGY TO BOOST SALES</h2>
<p class="greytxt fontlight">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi minima, cumque dicta, minus, sit, praesentium officia deleniti beatae necessitatibus sequi tempora totam ut impedit dolores.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img class="" src="Images/memorialbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt ">Lasting Memories</h6>
<h2 class="blacktxt ">WE SERVE YOU WITH LOVE</h2>
<p class="greytxt fontlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum nam sequi dolorum similique praesentium, necessitatibus, aspernatur expedita sed natus illum ut, vitae! Possimus, tempore, facere!</p>
</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<section id="testimonials">
<div class="testimonials">
<a name="testimonials"></a>
<h6 class="goldtxt whitebg">what people are saying...</h6>
<h1 class="blacktxt fontlight whitebg">TESTIMONIALS</h1>
<div class=“testimonial-slider">
<div class="testimonial-slide current">
<div class="content">
<h1>Antonio & Anica </h1>
<p class="greytxt fontlight">
"Antonio and I could never repay you for your contribution to our wedding.As you know,for most women,it is one of the most momentous occasions in their lifetime and that was certainly the case for me.<br />From the beginning,you
knew how important that day would be for me and you added such unique elements of class and style.<br />You truly made our experience much better than what I had imagined it would be."
</p>
</div>
</div>
<div class="testimonial-slide">
<div class="content">
<h1>Mrs Beasley </h1>
<p class="greytxt fontlight">
"Dina is the best! The restaurant and dining room are chic and modern.
The staff and owner are incredibly professional and warm.<br /> <br />
Dina really helped us make our wedding reception and cocktail hour uniquely ours."
</p>
</div>
</div>
<div class="testimonial-slide">
<div class="content">
<h1>Bride Review</h1>
<p class="greytxt fontlight">
“ I feel incredibly honored to have worked with Dina! When my husband and I reflect on our wedding day,
our biggest regret is not having met Dina sooner.<br /> <br />
We can't wait to start planning a vow renewal celebration,
so that we can have her plan the entire thing!!!"<br />
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</section>
THE CSS CODE
h1 {
font-family: 'Nunito Sans', sans-serif;
margin: 0;
font-size: 30px;
}
h2 {
font-family: 'Nunito Sans', sans-serif;
margin: 0;
text-transform: uppercase;
font-size: 17px;
}
h6 {
font-family: 'TuesdayNight';
margin: 0;
font-size: 30px;
}
p {
font-family: 'Nunito Sans', sans-serif;
font-size: 15px;
}
#media screen and (min-device-width : 250px) and (max-width: 850px) {
h1 {
font-size: 15px;
}
h2 {
font-size: 14px;
margin: 0;
}
h6 {
font-size: 25px;
}
p {
font-size: 13px;
}
}
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container, .main {
width: calc(100%-300px);
width:100%;
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 50px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page-slides img {
height: 100%;
min-height: 100%;
width: 100%;
object-fit: cover;
}
#media screen and (min-device-width : 280px) and (max-width: 850px) {
html, body {
overflow-x: hidden;
}
.desc-container {
float: right;
position: absolute;
margin: 10%;
margin-bottom: -5%;
}
.desc {
width: 75%;
height: 25%;
position: relative;
}
.home-page-slides img {
object-fit: cover;
}
}
/*----------------------------------------------------
#Testimonial Page
-----------------------------------------------------*/
.testimonials {
height:100%;
width:100%;
background-image: url(../Images/eventbg7.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.testimonial-slider {
width:100%;
}
.testimonial-slide {
width:calc(100%-300px);
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.testimonial-slide.current {
opacity: 1;
}
.testimonial-slide .content {
width:calc(100%-300px);
height: 100%;
opacity: 0;
width: 600px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
padding: 35px;
}
.testimonial-slide .content{
opacity: 1;
}
.testimonial-slide .content h1 {
}
.testimonial-slide .content {
opacity: 1;
/* transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s; */
}
.buttons button#next {
}
.buttons button#prev {
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
cursor: pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
Working on building a site for my portfolio and the img is overflowing into the next div. I tried using clearfix and it has not worked. I wanted the img next to the text in the "about me" section. I would like to know how I can avoid to this issue in the future and what steps do I need to take to accomplish what I would like. What I have now
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Peter Santiago</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="inner">
<p>Hello!</p>
<h1>I'm
<br>
Peter Santiago </h1>
<span>Freelance Creative</span>
</div>
</header>
<div class="intro">
<h2>About Me </h2>
<div class="clearfix">
<img class="img-circle" src='https://i.imgur.com/YzoIKdk.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt.
Sed haec quidem liberius ab eo dicuntur et saepius. Si de re disceptari oportet,
nulla mihi tecum, Cato, potest esse dissensio. </p>
</div>
</div>
<div class="skills">
<h2>My Skills </h2>
</body>
</html>
/* About me-----------------*/
.intro{
background:white;
padding: 50px;
height: 300px;
}
.intro h2 {
color:#5D667C ;
font-family:"Open Sans";
font-weight:800;
font-size: 4em;
text-align: center;
}
.img-circle {
float:left;
}
.intro p {
text-align:justify;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Skills---------------*/
.skills {
background-color:#5D667C ;
color: white;
height: 300px;
}
.skills h2 {
color:white ;
font-family:"Open Sans";
font-weight:800;
font-size: 4em;
text-align: center;
}
What results I would like
You can use a "float: left" css property in the image css stylesheet.I hope my answer help you..
and make a external css file and include into the main page in order to find errors more easily among modules of the Portfolio Site.
Add overflow: auto; to .intro . This will make sure that the container completely wraps around any floated element in it.