This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I've got two bootstrap columns, one containing text and the other containing an image.
Firstly, I want to vertically center both columns in the row.
Secondly, If the image height is less than the text height or vice-versa, I want the one with the smaller height to be vertically in the middle of its column.
#welcome-section {
padding: 80px 60px;
}
#welcome-section .column {
height: 100%;
}
#welcome-section .column .welcome-content,
#welcome-section .column img {
width: 100%;
height: auto;
}
#welcome-section .column img {
-webkit-box-shadow: 4px 4px 10px #000;
box-shadow: 4px 4px 10px #000;
}
#welcome-section .column .welcome-content .welcome-txt {
color: #102542;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 2px;
}
#welcome-section .column .welcome-content .subhead {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 1px;
}
#welcome-section .column .welcome-content p {
font-size: 1.1rem;
letter-spacing: 1px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<section id="welcome-section">
<div class="container">
<div class="row">
<div class="column col-lg-6 col-md-12">
<div class="welcome-content">
<p class="welcome-txt">Welcome</p>
<h1 class="my-4">A New Vision of Luxury</h1>
<p class="subhead my-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
<span>- John Doe, Manager</span>
</div>
</div>
<div class="column col-lg-6 col-md-12">
<img src="https://images.pexels.com/photos/221457/pexels-photo-221457.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
</div>
</div>
</section>
</body>
</html>
With bootstrap 4 just add the class "align-items-center" on row:
<div class="row align-items-center">
</div>
JSFiddle: https://jsfiddle.net/charlesartbr/n3mo0uzq/3/
Related
Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
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 have the majority of my code wrapped in a container with the following style:
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
This is to enable me to scroll smoothly from one section of the page that takes up a height of 100vh to another. (That is why I have overflow: auto in my styling). However, when I add the "overflow: auto", the web page stops being the full width of my window (as shown in the image).
screenshot of problem
When I remove the "overflow: auto" and replace it with "overflow: none", then the width is fixed but my scrolling feature now longer works.
HTML Code here:
<body class="container-fluid">
<!-- Main Page -->
<div class="container">
<div class="section">
<div class="main row vertical-center">
<div class="main-image col-md-6">
<img src="rec/img/placeholder-image.png" alt="client_image">
</div>
<div class="main-text align-items-center col-md-6">
<h2 class="p-3">
Name Lastname
</h2>
<span class="align-bottom bottom-text-main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
</span>
</div>
<span id="contact">
<!-- <ul class="contact-icons" style="list-style-type:none;">
<li></li></li>
<li></li>
<li></li>
</ul> -->
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<!-- Information -->
<div class="section info">
<div class="information p-4 pb-0" id="information">
<h1 >More about me.</h1>
<br>
<div class="background ml-3">
<h5 class = "pb-1">Background</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
</div>
<div class="skills ml-3">
<h5 class="pb-1">Skills</h5>
<ul>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
</ul>
</div>
</div>
</div>
<!-- Experience -->
<div class="section">
<div class="experience p-3" id="experience">
<h1 class="pt-3">Work experience</h1>
<br>
<div class="xp">
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
</div>
</div>
</div>
</div>
<!-- Additional Inforation -->
<div class="section">
<div class="additional-info p-3" id="additional-info">
<h1>Additional Information</h1>
<!-- <h1 class="second-line-info">Information</h1> -->
<div class="additional-info-text text-left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="section" id="footer">
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Name Lastname</h5>
<p>Cliche Inspiritional Quote Here</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-9">
<!-- Links -->
<h5 class="text-uppercase">Contact Links</h5>
<ul class="list-unstyled">
<li>
<i> Facebook</i>
</li>
<li>
<i> Instagram</i>
</li>
<li>
<i> Email</i>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
</div>
</div>
Here is the CSS file:
body {
color: var(--grey);
width: 100%;
padding: 0;
margin: 0;
min-width: fit-content;
}
.container {
position: relative;
width: 100vh;
height: 100vh;
overflow: visible;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
height: 100%;
width: 100%;
scroll-snap-align: start;
/* background-blend-mode: multiply; */
}
/* .container.section:nth-child(1) {
background: ;
background-size: cover;
background-attachment: fixed;
} */
.main {
background-color: var(--white);
padding-left: 0%;
padding-right: 0%;
margin-top: 0rem;
margin-bottom: 0rem;
height: 100vh;
}
.main-image {
padding-top: 0%;
margin-left: 0%;
padding-right: 0;
margin-bottom: 2rem;
height: 50%;
}
.main-image img {
height: 100%;
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
.main-text {
padding-bottom: 2rem;
height: 50%;
/* margin-left: 5%;
margin-right: 5%; */
}
.main-text p {
vertical-align: middle;
}
.information {
background-color: var(--soft);
height: 100vh;
padding-top: 0;
}
.experience {
background-color: var(--white);
height: 100%;
}
.information h1 {
padding-top: 1rem;
}
.background {
padding-top: 3rem;
}
.skills ul {
list-style-type: none;
}
.skills {
padding-top: 3rem;
}
.additional-info {
background-color: var(--soft);
height: 100vh;
padding-top: 1rem;
}
.additional-info h1 {
color: var(--grey);
}
.second-line-info {
margin-left: 5rem;
}
.additional-info-text {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
.additional-info-text p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#footer {
height: 10vh;
}
.list-unstyled i {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#media only screen and (min-width: 600px) {
html {
width: 100%;
}
body {
width: 100%;
padding: 0;
}
.main {
padding-top: 0%;
width: 100%;
}
.vertical-center {
display: flex;
align-items: center;
}
.main-image {
height: 100%;
margin-top: 15%;
}
.main-image img {
border-radius: 50%;
height: 50%;
width: 75%;
}
.main-text {
height: 100%;
margin-top: 20%;
}
.main-text h2 {
margin-bottom: 3rem;
}
#contact {
position: absolute;
bottom: 2%;
right: 2%;
}
.contact-icons {
padding: 0;
font-size: 2em;
display: table-cell;
}
.fa {
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.contact a {
display: inline-block;
width: 1.2em;
transition: all .2s ease-in-out;
}
a:hover {
text-decoration: none;
}
.additional-info {
text-align: left;
justify-content: left;
}
.additional-info-text p {
margin-top: 2rem;
}
/* BEVAN ONDER */
/* General */
body, html
{
width: 100%;
padding: 0;
margin:0;
}
.container{
width: 100%;
}
.container.section{
width: 100%;
}
/* Information page(s) */
.background{
padding-top: 2rem;
}
.skills{
padding-top: 2rem;
}
.background p{
width: 50%;
}
}
Is there a possible fix for this?
Use this css value
overflow:scroll
or
overflow:visible
Keeping them auto will let browser decide the overflow.
I personally never use auto value.
try this
overflow:scroll;
width:100vw
if didn't work please edit post and add html
The section of code that I am using is shown below and it shows all the bubbles on the left side, i.e. either the one sent by the user "friend" or by the user "self".
As you can see, I've tried it with float, but when using relative/absolute positioning between parent and child divs, everything was being overlapped as I did not know what to do with the height.
Thanks in advance for your help!
P.S.: I am using Bootstrap.
<div class="row no-gutters">
<div class="chat-bubble-container ">
<div class="chat-bubble msg-self">
Lorem ipsum!
</div>
</div>
</div>
<div class="row no-gutters">
<div class="chat-bubble-container">
<div class="chat-bubble msg-friend">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
</div>
</div>
</div>
.chat-bubble-container {
width: auto;
}
.chat-bubble {
font-size: 1.4rem;
padding: 1rem 1.4rem;
margin: 1rem 3rem;
border-radius: .9rem;
}
.msg-friend {
color: white;
background-color: grey;
}
.msg-self {
color: white;
background-color: pink;
}
You can use margin-left: auto; and margin-right: auto; properties to achieve that layout.
.chat-bubble-container {
display: flex;
width: 100%;
}
.chat-bubble {
font-size: 1.4rem;
padding: 1rem 1.4rem;
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: .9rem;
width: auto;
max-width: 300px;
}
.msg-friend {
color: white;
background-color: grey;
margin-left:3rem;
margin-right: auto;
}
.msg-self {
color: white;
background-color: pink;
margin-right:3rem;
margin-left: auto;
}
<div class="row no-gutters">
<div class="chat-bubble-container ">
<div class="chat-bubble msg-self">
Lorem ipsum!
</div>
</div>
</div>
<div class="row no-gutters">
<div class="chat-bubble-container">
<div class="chat-bubble msg-friend">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
</div>
</div>
</div>
I am trying to create a responsive page where the "boxes" wrap to another row when browser window it made smaller. I used:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
to accomplish this in the pen below.
See link for example of behavior desired.
https://codepen.io/DukeJellington/pen/BrMQga
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark)
}
body {
background: #ccc;
margin: 30px 50px;
line-height: 1.4;
}
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<!-- Boxes -->
<section class="boxes">
<div class="box">
<i class="fas fa-chart-pie fa-4x"></i>
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-globe fa-4x"></i>
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-cog fa-4x"></i>
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Support</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
</section>
Notice how the icons/text will wrap to the lower row when window is made smaller, until there is one grid item is on top of another.
However, there is something prohibiting this behavior on the full page that was created in the link below; and I am unable to find what is prohibiting this behavior.
https://codepen.io/DukeJellington/pen/vRbyqb
/* CSS Variables */
:root {
--primary: #ddd;
--dark: #333;
--light: #fff;
--shadow: 0 1px 5px rgba(104, 104, 104, 0.8)
}
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark)
}
body {
background: #ccc;
margin: 30px 50px;
line-height: 1.4;
}
.btn {
background-color: var(--dark);
color: var(--light);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 20px;
}
/* Navigation */
.main-nav ul {
display: grid;
grid-gap: 20px;
padding: 0;
list-style: none;
grid-template-columns: repeat(4, 1fr);
}
.main-nav a {
background: var(--primary);
display: block;
text-decoration: none;
padding: 0.8rem;
text-align: center;
color: var(--dark);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--dark);
color: var(--light);
}
/* Top Container */
.top-container {
display: grid;
grid-gap: 20px;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b'
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url(img/showcase.jpg);
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0;
color: var(--light);
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
color: var(--light);
}
/* Top Box */
.top-box {
background: var(--primary);
display: grid;
align-items: center;
justify-items: center;
box-shadow: var(--shadow);
padding: 1.5rem;
}
.top-box .price {
font-size: 2.5rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
/* Boxes */
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<div class="wrapper">
<!-- Navigation -->
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Top Container -->
<section class="top-container">
<header class="showcase">
<h1>Your Web Presence</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, omnis magnam? Tempore ut vero ex.</p>
Read More
</header>
<div class="top-box top-box-a">
<h4>Membership</h4>
<p class="price">$199/month</p>
Buy Now
</div>
<div class="top-box top-box-b">
<h4>Pro Membership</h4>
<p class="price">$299/month</p>
Buy Now
</div>
</section>
<!-- Boxes Section -->
<section class="boxes">
<div class="box">
<i class="fas fa-chart-pie fa-4x"></i>
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-globe fa-4x"></i>
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-cog fa-4x"></i>
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Support</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
</section>
<!-- Information Section -->
<section class="info">
<img src="img/pic1.jpg" alt="">
<div>
<h2>Your Business on the Web</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, minima praesentium accusamus maxime repellat, amet non necessitatibus enim officia ipsam saepe nemo deleniti incidunt vero autem earum accusantium sed corporis.
Learn More
</p>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200" alt="">
<img src="https://source.unsplash.com/random/200x201" alt="">
<img src="https://source.unsplash.com/random/200x202" alt="">
<img src="https://source.unsplash.com/random/200x203" alt="">
<img src="https://source.unsplash.com/random/200x204" alt="">
<img src="https://source.unsplash.com/random/200x205" alt="">
<img src="https://source.unsplash.com/random/200x206" alt="">
<img src="https://source.unsplash.com/random/200x207" alt="">
<img src="https://source.unsplash.com/random/200x208" alt="">
</section>
<!-- Footer -->
<footer>
<p>GridBiz © 2018</p>
</footer>
</div>
<!-- Wrapper Ends -->
In the link above, when the window is made smaller, the final div wraps below, but the other grid items remain on the same row when the window is minimized further.
I played with the code a bit and noticed that when I commented out the following styling for the wrapper class, the grid items behave as desired.
.wrapper {
display: grid;
grid-gap: 20px;
Can somebody tell me what about having the grid display for the wrapper class is prohibiting my grid items below from wrapping properly?
Your .boxes grid doesn't wrap further due to other wider sibling blocks in main .wrapper block.
By default when you add just display: grid for a block, it becomes a grid container. Your .wrapper grid container has only single column and minimum width of this column is defined by a child with the biggest minimum size. The top biggest child in your case is .main-nav ul because it has 4 columns which won't shrink regardless of resolution. The next big container is .top-container which also have big number of unshrinkable content.
So for resolving your issue just make .main-nav ul and .top-container blocks shrinkable in any way.
Also note that for 1D layout you can use Flexbox.