I'm trying to replicate a website that claimed it was only made with the basic Html, CSS and JavaScript. Annoyingly I can't seem to make the images responsive and relatively the same
Can someone explain to me what I’m doing wrong? I'm using flexbox to make the site responsive but the alignments are off and I cant get them to sit next to each other with all the correct padding as well
This is my work:
https://codepen.io/Hitmonchan98/pen/PoQLRPy
This is what I want my site to look like:
https://i.stack.imgur.com/jsdxo.jpg
//html
<body>
<div class="main">
<div class="main-img"><img class="firstImage"src="https://www.amazingonly.com/wp-content/uploads/2013/04/images4-1728x1080.jpg" alt=""></div>
<div class="text">
<h2>Discover innovative ways to decorate</h2>
<p class="para">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia repudiandae dolore iure laudantium fugiat fuga sunt unde voluptates et, quasi exercitationem eum consectetur. Doloremque, ab?</p>
<div class="shop">Shop Now</div>
</div>
</div>
<div class="lower">
<div class="dark image">
<img class="dark-img" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="">
</div>
<div class="text2">
<h3>About furniture</h3><p class="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus ipsa, adipisci perspiciatis debitis magni sed possimus pariatur qui exercitationem fugiat iusto error ducimus, quos quis, eius earum tempore quibusdam laboriosam!</p></p></div>
<div class="light image">
<img class="light-img"src="https://www.pixelstalk.net/wp-content/uploads/2016/07/Download-Free-Pictures-4k.jpg" alt="">
</div>
</div>
</body>
//css
body{
margin: 0;
padding: 0;
line-height: 2rem;
}
/*Body*/
.firstImage,.light-img,.dark-img
{
width: 100%;
}
.text2{
padding: 2rem;
}
.text h2
{
font-size:3rem;
}
#media screen and (min-width: 768px) {
.main{
display: flex;
}
.text{
padding: 1rem 3rem 3.5rem 3rem;
}
.lower{
display: flex;
align-content:center;
}
.text2{
padding:0;
width: 40%;
}
.dark, .light
{
width: 30%;
}
.dark-img, .light-img {
width: 100%;
}
}
#media screen and (min-width: 786px) {
}
Add display: block; to your img elements and this should get rid of the white spacing underneath them. Images are weird in HTML since they have properties of both display inline and block, and I usually set them to block to have maximum styling control over them.
Related
I'm creating an 'About' section for a website, which is a table with three equal-width columns: a headshot, a paragraph, and another paragraph (see screenshots below).
I'd like to have the image automatically resize (keeping its aspect ratio) to be the height of the largest text- aligned left within the cell- without hardcoding any height/width values. However, I've played around a bunch and nothing seems to make the image resize.
/* an element that's one-third the width of its container */
.third-width {
width: 33%;
}
/* the headshot photo */
#headshot {
border-radius: 5px;
max-width: 100%;
max-height: 100%;
display: inline-block;
}
#about-table td {
background-color: pink;
padding: 1vw;
text-align: justify;
vertical-align: top;
font-family: var(--body-font);
font-weight: lighter;
}
<table id="about-table">
<tr>
<td class="third-width">
<img id="headshot" src="https://via.placeholder.com/80" alt="None">
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
<td class="third-width">
<p>[... SOME TEXT ...]</p>
</td>
</tr>
Current state:
What I would like:
Thank you!
Use CSS Flex instead of table
Make the cells flex: 1; position: relative;
Make the image position: absolute; with 100% W/H and object-fit: cover to not distort the image
/* QuickReset */
* { margin:0; box-sizing: border-box; }
/* About component */
.About {
display: flex;
}
.About > div {
position: relative;
flex: 1;
outline: 1px solid #000;
padding: 20px;
}
.About > div img {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="About">
<div><img src="https://placekitten.com/408/287" alt="Catz!"></div>
<div>Lorem ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur tempora voluptatibus eligendi dolorem. Excepturi perspiciatis ipsa porro, minus ea.</div>
</div>
<div class="About">
<div>Lorem ipsum</div>
<div>Molestiae sunt nisi nostrum sed, ipsa porro, minus ea.</div>
<div><img src="https://placekitten.com/500/300" alt="Catz!"></div>
</div>
<div class="About">
<div><img src="https://placekitten.com/310/290" alt="Catz!"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur</div>
<div>Lorem ipsum</div>
</div>
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 need a solution guys, i want the two boxes in pink and white to have same height as its parent container in blue box (that is to stop where that blue box stopped) without depending on the content of the div in pink and white boxes.
here is my fiddle code
https://jsfiddle.net/dcq4bufa/3/
my HTML CODE
<head>
<title>eco</title>
</head>
<body>
<header class="header">
<ul class="nav">
<li class="nav-items">HOME</li>
<li class="nav-items">APP</li>
<li class="nav-items">STORE</li>
</ul>
<div class="home">
<div class="home__right">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nemo
aliquid saepe tempora doloribus dicta quas aperiam, eius odio ipsa culpa ipsam rerum quam vero
itaque, recusandae sint perferendis ipsum.</p>
<h1 class="home__right--sub"> tenetur quidem ducimus quod odit totam, dolor</h1>
</div>
<home class="home__left">
<h1 class="paragraph">Lorem ipsum dolor sit amet, consectetur ad</h1>
</home>
</div>
</header>
</body>
First you must outline the height of the parent container(blue),then set the two children elements(pink and white)height of 100% since they are in a container that is 100 of your device height.Try this:
.home {
display: flex;
height:100vh;
&__right {
background-color: pink;
height:100%;
flex-basis: 50;
}
&__left {
background-color: white;
height:100%;
flex: 1;
}
}
You can adjust the height of .home if you are not comfortable with the overflow
If you can use flexbox, you may do the following:
.header {
height: 80vh;
background-color: blue;
/* Add flexbox */
display: flex;
flex-direction: column;
}
.home {
display: flex;
flex: 1; /* Set flex-grow: 1 */
...
The problem arises when there is a variable width image set to max-height: 100%; in a flex-item. When the page loads flex box successfully gets the width for the current size of the flex-item, however if you resize the browser which forces the image to decrease in size (or increase), the outer container does not follow the new width.
If you run the code snippet below in full screen you'll see on initial load the image is fully surrounded by the pink box, but when you resize (make the height smaller) the image shrinks and the flex container stays at the same width.
.flex {
display: inline-flex;
background-color: deeppink;
height: calc(100vh - 20px);
border: 10px solid deeppink;
}
.flex-left {
width: 250px;
}
.flex-right img {
width: auto;
min-width: 0;
max-height: 100%;
}
<div class="flex">
<div class="flex-left">
<h2>Testing headline</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>
</div>
<div class="flex-right">
<img src="http://unsplash.it/1000/650" alt="">
</div>
</div>
Try adding a percentage height to the image container.
The image is already flexible, because its dimensions are set in percentages. With a percentage height on the container, it becomes flexible, as well.
jsfiddle demo
.flex {
display: inline-flex;
background-color: deeppink;
height: calc(100vh - 20px);
border: 10px solid deeppink;
}
.flex-left {
width: 250px;
}
.flex-right {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="flex">
<div class="flex-left">
<h2>Testing headline</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>
</div>
<div class="flex-right">
<img src="http://unsplash.it/1000/650" alt="">
</div>
</div>
I have HTML structure like:
<div class="container">
<div class="btn-1"></div>
<div class="btn-2"></div>
<div class="btn-3"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>
btn-1 should be aligned to the top left, all other buttons (btn-2, btn-3...) should be aligned to the top right.
The text after all these buttons should be 100% width.
Quick mockup:
I figured out the first part (buttons) with:
.container {
display: flex;
justify-content: flex-end;
}
.btn-1 {
/* align first button to the left */
margin-right: auto;
}
Bu not matter what I do, the text doesn't flow to the next line...
Here's my JSFiddle https://jsfiddle.net/an0o7taq/
Thanks for any help!
You need to add flex-wrap: wrap to the container.
By default, flex containers are set to flex-wrap: nowrap, forcing items to remain on a single line.
revised jsfiddle
Spec reference:
5.2. Flex Line Wrapping: the flex-wrap property
You need more container with different flex flows and styles. Tip: learn most important flex props: align-items, flex-flow, justify-content. They all apply to the direct children of the container. So when you want your layout you need more container with different flex flows.
This guide helped me a lot. They also have great examples:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
flex-flow: column nowrap;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.header-left, .header-right {
display: flex;
flex-flow: row nowrap;
}
.btn {
width: 40px;
height: 40px;
border: 1px solid #ddd;
background-color: #eee;
}
.text {
width: 100%;
}
<div class="container">
<div class="header">
<div class="header-left">
<div class="btn">btn1</div>
</div>
<div class="header-right">
<div class="btn">btn2</div>
<div class="btn">btn3</div>
</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>