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.
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?
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>
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
I've prepared three containers on the body. Header, main, and footer. The main uses a grid and contains a couple of children. The problem is that lower children are overflowing a container in height and in this case also they overflowing a footer.
The more elements I have, the more overflow is.
My goal is for "main" contains child elements without overflow.
I also would be appreciated for an explanation, why the main don't authorize automatically height having regard to I don't have any fixed size.
You can check, how it's working now on codepen:
https://codepen.io/kornavol/pen/gOLXKKo
body {
width: 80%;
text-align: center;
margin: auto;
}
.grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: 3%;
margin: 20px auto 20px
}
.card {
box-shadow: 0 0 20px #777;
border-radius: 25px;
text-align: center;
}
.card>img {
width: 100%;
height: 40%;
object-fit: cover;
border-radius: 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.card>a {
text-decoration: none;
color: black;
}
.card>a>h4 {
width: 100px;
background-color: rgb(255, 150, 22);
border-radius: 5px;
margin: auto;
}
.banner {
width: 100%;
height: 20vw;
object-fit: cover;
}
header>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-top-right-radius: 15px;
color: white;
}
footer>img {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
footer>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-radius: 0;
border-bottom-left-radius: 15px;
color: white;
}
<div id="root">
<div class="App">
<header>
<h1>Welcome on My Store</h1><img class="banner" style="border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;" src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
</header>
<main class="grid-container">
<div class="card"><img src="https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=966&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Iphone</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1100</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1593642632505-1f965e8426e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1200</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1550029402-226115b7c579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Huawei</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1300</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1491933382434-500287f9b54b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Nokia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1400</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1516163109866-e9d98630a0a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Pixel</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1500</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1572797258555-4f33f86f443f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1048&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1600</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
</main>
<footer><img class="banner" style="border-top-left-radius: 25px; border-top-right-radius: 25px;" src="https://images.unsplash.com/photo-1542581509-7e87190743b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
<p>- 2021 -</p>
<h1 class="la">We're looking forward to see you again</h1>
</footer>
</div>
</div>
The gap: 3% rule in the container is causing the main element to overflow the footer.
Try using grid-column-gap: 3% instead. You can add the remaining gaps to the grid items themselves: .card { margin: 10px }
OR, do the math so that the gap property can work on its own in the container.
body {
width: 80%;
text-align: center;
margin: auto;
}
.grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
grid-column-gap: 3%; /* adjustment */
margin: 20px auto 20px
}
.card {
margin: 10px; /* new */
box-shadow: 0 0 20px #777;
border-radius: 25px;
text-align: center;
}
.card>img {
width: 100%;
height: 40%;
object-fit: cover;
border-radius: 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.card>a {
text-decoration: none;
color: black;
}
.card>a>h4 {
width: 100px;
background-color: rgb(255, 150, 22);
border-radius: 5px;
margin: auto;
}
.banner {
width: 100%;
height: 20vw;
object-fit: cover;
}
header>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-top-right-radius: 15px;
color: white;
}
footer>img {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
footer>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-radius: 0;
border-bottom-left-radius: 15px;
color: white;
}
<div id="root">
<div class="App">
<header>
<h1>Welcome on My Store</h1><img class="banner" style="border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;" src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
</header>
<main class="grid-container">
<div class="card"><img src="https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=966&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Iphone</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1100</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1593642632505-1f965e8426e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1200</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1550029402-226115b7c579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Huawei</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1300</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1491933382434-500287f9b54b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Nokia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1400</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1516163109866-e9d98630a0a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Pixel</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1500</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1572797258555-4f33f86f443f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1048&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1600</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
</main>
<footer><img class="banner" style="border-top-left-radius: 25px; border-top-right-radius: 25px;" src="https://images.unsplash.com/photo-1542581509-7e87190743b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
<p>- 2021 -</p>
<h1 class="la">We're looking forward to see you again</h1>
</footer>
</div>
</div>
is it appropriate that way?
.grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) ;
grid-template-rows: minmax(0, 1fr);
margin: 20px auto 20px
}
.card {
box-shadow: 0 0 20px #777;
border-radius: 25px;
text-align: center;
display: inline-table;
padding: 3%;
margin: 3%;
}
.card > img {
width: 100%;
height: 40%;
max-height: 250px;
object-fit: cover;
border-radius: 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
hello the problem is while assign the values to footer you also have to defined it as a grid so to solve this problem in 3 lines you just have to add a id to footer and declare it
as grid after that just asign top padding to that id
html
css
css #footer{ display: grid; padding-top: 150px;}
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>