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>
Related
body{
font-family: "Roboto", "Helvetica","Sans-serif";
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
color: #777;
line-height: 1.7;
}
h1,h2{
font-family: "Playfair Display", serif;
font-weight: 500;
}
.agents{
margin-left: 5%;
padding-bottom: 100px;
}
.agents h1{
font-size: 40px;
margin-bottom: -1.5%;
}
.services{
background-color: rgba(221, 218, 218, 0.404);
display: flex;
flex-direction: row;
width: 1400px
}
ion-icon{
font-size: 250%;
color: rgb(255, 162, 40);
margin-top: 15px;
padding-right: 20px;
padding-left: 20px;
}
.about{
margin-top: 5%;
}
.large-paragraph{
font-size: 1.25rem;
font-weight: 300;
}
.about a{
background-color: rgb(255, 162, 40);
text-decoration: none;
color: rgb(255, 255, 255);
padding: 15px 30px;
line-height: 1.5;
font-size: 16px;
border-radius: 30px;
margin-top: 10%;
}
.left img{
width: 55%;
margin-left: 20%;
margin-top: 5%;
padding-bottom: 100px;
}
.profiles{
width: 375px;
margin: 2%;
background-color: rgba(221, 218, 218, 0.616);
}
.profiles img{
width: 100%;
}
h1{
color: rgb(255, 162, 40);
}
.services h1{
font-size: 300%;
}
.about h1{
font-size: 250%;
letter-spacing: 2%;
word-spacing: 2%;
}
h3{
font-family: playfair-display, serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: black;
}
.profile p, .profile h3{
padding-left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css">
<link rel="stylesheet" href="https://use.typekit.net/hut3eue.css">
</head>
<body>
<section class="agents">
<h1>Agents</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
<div class="row">
<div class="profiles">
<img src="images/person_1.jpg" alt="Kaiara Spencer">
<h3>Kaiara Spencer</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_2.jpg" alt="Dave Simpson">
<h3>Dave Simpson</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_3.jpg" alt="Ben Thompson">
<h3>Ben Thompson</h3>
<small>Real Estate Agent</small>
</div>
</div>
<div class="row">
<div class="profiles">
<img src="images/person_4.jpg" alt="Kyla Stewart">
<h3>Kyla Stewart</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_5.jpg" alt="Rich Moffatt">
<h3>Rich Moffatt</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_6.jpg" alt="Stuart Redman">
<h3>Stuart Redman</h3>
<small>Real Estate Agent</small>
</div>
</div>
</section>
<hr>
<section class="about">
<div class="row">
<div class="left">
<img src="images/property_1.jpg">
</div>
<div class="right">
<h1>We Are the Best Real <br>
Estate Company</h1>
<p class="large-paragraph">Lorem ipsum dolor sit amet consectetur <br>
adipisicing elit.</p>
<p>Est qui eos ratione nostrum excepturi id recusandae fugit <br>
omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit <br>
omnis iste velit maxime.</p>
<ul>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
</ul>
<br/>
<br/>
Learn More
</div>
</div>
</section>
<section class="services">
<h1>Services</h1>
<div class="row">
<div class="box">
<div><ion-icon name="home"></ion-icon></div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br>
consectetur adipisicing elit.<br>
Perferendis quis molestiae vitae
eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div><ion-icon name="home"></ion-icon></div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br>
consectetur adipisicing elit.<br>
Perferendis quis molestiae vitae
eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div><ion-icon name="home"></ion-icon></div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br>
consectetur adipisicing elit.<br>
Perferendis quis molestiae vitae
eligendi at.
</p>
Learn More
</div>
</div>
</div>
</section>
</body>
<script src="https://unpkg.com/ionicons#5.0.0/dist/ionicons.js"></script>
</html>
What I am trying to do is get the flex container "row" in the "services" section to quite literally display as a row but for some reason it is displaying as a column. I'm not allowed to used to use flex grid for this(as a challenge) and I have tried putting it all in another tag to see if that would do anything but nothing seems to be working.
Technically, the '.row' container is not a flex container, so setting the display to flex will automatically solve this problem
.row {
display: flex;
}
Paste the code above in the css
You should also try refactoring your css, the code is a bit unorganized.
For you and others to understand your code better, try using "consistent naming convention", add comments to your code, and style elements in the order of their appearance in the html. Or even more better, have different stylesheets for different components. This would improve your effeciency by .1% (at the least)!!
It looks like you forgot to style your row class:
.row {
display: flex;
flex-direciton: row;
}
Your question is somewhat confusing but if you mean the CONTENTS OF .row of profiles this should work:
(If you mean the rows in the container .agents that is slightly different but perhaps you can build from this?)
body {
font-family: "Roboto", "Helvetica", "Sans-serif";
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
color: #777;
line-height: 1.7;
}
h1,
h2 {
font-family: "Playfair Display", serif;
font-weight: 500;
}
.agents {
margin-left: 5%;
padding-bottom: 100px;
}
.agents h1 {
font-size: 40px;
margin-bottom: -1.5%;
}
.row {
display: flex;
flex-direction: row;
}
.services {
background-color: rgba(221, 218, 218, 0.404);
display: flex;
flex-direction: row;
width: 1400px
}
ion-icon {
font-size: 250%;
color: rgb(255, 162, 40);
margin-top: 15px;
padding-right: 20px;
padding-left: 20px;
}
.about {
margin-top: 5%;
}
.large-paragraph {
font-size: 1.25rem;
font-weight: 300;
}
.about a {
background-color: rgb(255, 162, 40);
text-decoration: none;
color: rgb(255, 255, 255);
padding: 15px 30px;
line-height: 1.5;
font-size: 16px;
border-radius: 30px;
margin-top: 10%;
}
.left img {
width: 55%;
margin-left: 20%;
margin-top: 5%;
padding-bottom: 100px;
}
.profiles {
width: 375px;
margin: 2%;
background-color: rgba(221, 218, 218, 0.616);
}
.profiles img {
width: 100%;
}
h1 {
color: rgb(255, 162, 40);
}
.services h1 {
font-size: 300%;
}
.about h1 {
font-size: 250%;
letter-spacing: 2%;
word-spacing: 2%;
}
h3 {
font-family: playfair-display, serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: black;
}
.profile p,
.profile h3 {
padding-left: 30px;
}
<body>
<section class="agents">
<h1>Agents</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
<div class="row">
<div class="profiles">
<img src="images/person_1.jpg" alt="Kaiara Spencer">
<h3>Kaiara Spencer</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_2.jpg" alt="Dave Simpson">
<h3>Dave Simpson</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_3.jpg" alt="Ben Thompson">
<h3>Ben Thompson</h3>
<small>Real Estate Agent</small>
</div>
</div>
<div class="row">
<div class="profiles">
<img src="images/person_4.jpg" alt="Kyla Stewart">
<h3>Kyla Stewart</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_5.jpg" alt="Rich Moffatt">
<h3>Rich Moffatt</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_6.jpg" alt="Stuart Redman">
<h3>Stuart Redman</h3>
<small>Real Estate Agent</small>
</div>
</div>
</section>
<hr>
<section class="about">
<div class="row">
<div class="left">
<img src="images/property_1.jpg">
</div>
<div class="right">
<h1>We Are the Best Real <br> Estate Company</h1>
<p class="large-paragraph">Lorem ipsum dolor sit amet consectetur <br> adipisicing elit.</p>
<p>Est qui eos ratione nostrum excepturi id recusandae fugit <br> omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit <br> omnis iste velit maxime.</p>
<ul>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
</ul>
<br/>
<br/>
Learn More
</div>
</div>
</section>
<section class="services">
<h1>Services</h1>
<div class="row">
<div class="box">
<div>
<ion-icon name="home"></ion-icon>
</div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div>
<ion-icon name="home"></ion-icon>
</div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div>
<ion-icon name="home"></ion-icon>
</div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
</p>
Learn More
</div>
</div>
</div>
</section>
</body>
If you can't use flexbox, use css grid instead.
The old school way of doing things is use float: left on the divs and give width: 33.33333% to them. Or use display inline block with text-align center.
I want my items to be placed in a specific order, so that the title (The header with the copyright paragraph) to be centered in the middle of the page my About section to not fill up half of my page ... I've tried using flex-basis so that I can give every item a specific width but didn't seem to work, any ideas? Here is the code for the footer part, I have this problem for both navbar and footer, but I guess if it will work for one it will work in general
Also PM : I don't know why most of the html code dosen't show with snippet , here is an image of how it looks https://imgur.com/4xXP36C
HTML CODE :
.flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.container {
max-width: auto;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}
.footer .box a{
margin: 0 5px;
}
.lead {
font-size: 20px;
}
.py-1 {
padding: 1rem 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<footer class="footer bg-dark ">
<div class="container flex lead py-1">
<div class="box">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
</div>
<div class="box">
<h1>CarolandHousing</h1>
<p>Copyright © 2021</p>
</div>
<div class="box">
<nav>
<ul>
<li>Home</li>
<li>Features</li>
<li>Docs</li>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</ul>
</nav>
</div>
</div>
</footer>
Working Domo
Please find below the updated code according to your requirements which are as follows:-
All three columns in flex take equal width (33%)
Optional: Links removing list style and right align for better UI
.flex {
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.container {
max-width: auto;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.flex-basis-3{
flex-basis: 33%
}
.text-center{
text-align: center
}
.text-right{
text-align: right
}
.no-list{
list-style: none;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #000;
}
.footer .box a{
margin: 0;
}
.lead {
font-size: 20px;
}
.py-1 {
padding: 1rem 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<footer class="footer bg-dark ">
<div class="container-fluid flex lead py-1">
<div class="box flex-basis-3">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
</div>
<div class="box flex-basis-3 text-center">
<h1>CarolandHousing</h1>
<p>Copyright © 2021</p>
</div>
<div class="box flex-basis-3 text-right">
<div class="display: flex; justify-content: flex-end">
<span>Home</span>
<span>Features</span>
<span>Docs</span>
</div>
<div>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</div>
</div>
</footer>
I am not sure why my menu div is overlapping the legal ipsum when the page is made smaller? I've wrapped them in different coloured borders just to illustrate. Included is the HTML and CSS.
Right now I have it set to flexbox, space-between and the legal div has a fixed pixel width. I thought this was enough to have the flex children not overlap each other? What am I missing?
Any advice/help/guidance is very much appreciated. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#500;700&display=swap');
body {
font-family: 'Raleway', sans-serif;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.container {
max-width: 1200px;
width: 85%;
margin: 0 auto;
}
footer {
background: #F6F8FA;
}
.footer-logo {
font-size: 2rem;
}
.footer-wrapper {
height: 350px;
}
.footer-nav {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.footer-menus {
display: flex;
position: relative;
left: 125px;
text-transform: uppercase;
line-height: 40px;
margin-top: 25px;
border: 2px solid chartreuse;
}
.footer-menus a {
color: #333333;
font-size: 1.9rem;
font-weight: 700;
}
.footer-links {
margin-right: 25px;
}
.social-links {
margin-right: 25px;
}
.legal {
width: 275px;
line-height: 30px;
color: #777777;
border: 2px solid peachpuff;
}
.thin-line {
border-bottom: 1px solid #777777;
}
footer p {
font-weight: 500;
color: 777777;
}
</style>
</head>
<body>
<footer>
<div class="container">
<div class="footer-wrapper">
<nav class="footer-nav">
<div class="footer-logo">
<h3>travel</h3>
</div>
<div class="footer-menus">
<ul class="footer-links">
<li>home</li>
<li>about</li>
<li>blog</li>
<li>contact</li>
</ul>
<ul class="social-links">
<li>twitter</li>
<li>facebook</li>
<li>linkedin</li>
</ul>
</div>
<div class="legal">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod
ipsam suscipit exercitationem possimus autem ad.</>
</div>
</nav>
<div class="thin-line"></div>
<p>Travel Agency</p>
</div>
</div>
</footer>
</body>
</html>
Here is a codepen: https://codepen.io/jmitchelreed/pen/MWeMBxd
It´s good practice to use comments to indicate where a closing tag for one of your elements are. This is mostly useful for when you have a lot of nested items, unorganized lists, divs, and anchor tags all in just one html, such as in your file. A HTML comment will not appear in your final design.
You can place them anywhere you like. Consider reading this
You have a problem with your closing nav element, its beyond the closing tag for your div element with the class of "legal".
</head>
<body>
<footer>
<div class="container">
<div class="footer-wrapper">
<nav class="footer-nav">
<div class="footer-logo">
<h3>travel</h3>
</div> <!-- Footer logo end -->
<div class="footer-menus">
<ul class="footer-links">
<li>home</li>
<li>about</li>
<li>blog</li>
<li>contact</li>
</ul>
<ul class="social-links">
<li>twitter</li>
<li>facebook</li>
<li>linkedin</li>
</ul>
</div> <!-- Footer menu end -->
</nav> <!-- Navbar end -->
<div class="legal">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error temporibus quod
ipsam suscipit exercitationem possimus autem ad.</>
</div> <!--- Legal end -->
<div class="thin-line"></div> <!-- Unless this was intended, there is an extra closing div tag in here -->
<p>Travel Agency</p>
</div> <!-- Should this be the closing tag for the "Thin line" class? -->
</div> <!-- Container end -->
</footer> <!-- footer end -->
</body>
</html>
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;
}
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>