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>
Related
I would like to create a line across my page, just under the Breaking News title but it should have the same length as the contents of my Flexbox under it.
What I would like to achieve:
The Breaking News text should also be aligned with my flexbox. Ergo I placed both of them inside the Flexbox. The problem now is that:
for me to get my desired outcome I need to set a fixed width, but this will affect the responsiveness of my side, some content stays hidden when you drag and minimize the browser
if I don't set fixed width, the line takes all the space in my flexbox.
* {
box-sizing: border-box;
font-family: 'Encode Sans', sans-serif;
}
.main-header {
font-weight: 700;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
font-size: 20;
}
.secondary-header {
text-align: center;
font-size: 10;
margin-top: 0px;
}
.breaking-news-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: 25px;
margin-top: 150px;
}
.breaking-news-box {
width: 300px;
height: 400px;
border: 1px black;
border-style: dotted;
}
.breaking-news-images {
width: 100%;
object-fit: contain;
object-position: top;
}
.breaking-news-titles {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 0px;
padding-top: 10px;
margin-top: 15px;
margin-bottom: 0px;
}
.breaking-news-paragraph {
font-size: 12px;
padding-left: 15px;
padding-right: 15px;
}
.first-line {
margin: 0px;
padding: 0px;
}
<div class="breaking-news-title"> Breaking news </div>
<hr class="first-line" />
<div class="breaking-news-container">
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/1025/320/200">
<h3 class="breaking-news-titles">Missing dog found alive after 6 days</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/1048/320/200">
<h3 class="breaking-news-titles">Elon Musk investigated over Twitter deal</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/117/320/200">
<h3 class="breaking-news-titles">Billie Eilish announces Happier That Ever world tour</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/160/320/200">
<h3 class="breaking-news-titles">EU approves common charging cable from 2024</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
</div>
I found something about making the hr a pseudo element but it doesn't work.
Any thoughts?
I'm trying to recreate this but I'm stuck on getting the image and text to fit inside the innermost border. the final is supposed to have an outside border, an inside border, and a div that expands across the top. Then a picture that is 30% width of the top spanning div. Then text that is supposed to be width 70% of the top spanning div.
This is what I got so far HTML:
:root {
--winter-primary: #ffd110;
}
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
margin: 20px;
}
.wh {
background-color: var(--winter-primary);
padding: 30px;
}
.winter-image {
width: 30%;
float: left;
}
.wi {
width: 70%;
float: right;
}
<section class="winter">
<div class="outside-winter-border">
<div class="insdie-winter-border">
<div class="section-heading">
<div class="wh">
<h2>Winter</h2>
</div>
</div>
<div class="content-wrapper">
<div class="winter-image">
<div class="section-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
The exact desired result is unclear. However, here is a version using flex that gets both the image and text within the border. Don't use float.
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
}
img {
height: 100%;
}
.wh {
display: inline-flex;
}
.insdie-winter-border {
display: flex;
align-items: center;
}
:root {
--winter-primary: #ffd110;
}
p {
margin-left: 1em;
}
.section-heading {
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
<section class="winter">
<div class="outside-winter-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="insdie-winter-border">
<div class="wh">
<a href="winter.html">
<img src="https://dummyimage.com/125/000/fff" alt="Winter Image">
</a>
</div>
<div class="content-wrapper">
<div class="winter-image">
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think you can try this (insted of .winter-image and .wi ):
.content-wrapper {
display: flex;
}
.winter-image {
flex: 3;
}
.wi {
flex: 7;
}
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
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/