I work on the project about my travel in React. Data is provided from another file. Simple design: images should be on the left side and info covers right side. I have used display:flex on container div, width used on img-div and img, however images have different size. What should I do for fixing the size problem?
Thank you for the taking time.
* {
margin: 0;
box-sizing: border-box;
}
.trip-container {
display: flex;
}
.img-div {
width: 100%;
}
.img-div > img {
width: 100%;
object-fit: cover;
}
.info-div {
display: flex;
flex-direction: column;
}
.country-div {
display: flex;
}
and here is HTML:
<>
<div className="trip-container">
<div className="img-div">
<img src={props.trip.img}
alt="city" />
</div>
<div className="info-div">
<div className="country-div">
<i className="fa-solid fa-location-dot"></i>
<h5>{props.trip.country}</h5>
<a href={props.trip.gps}>
<p>
View on Google Maps
</p>
</a>
</div>
<h1>{props.trip.destination}</h1>
<p><strong>{props.trip.date}</strong></p>
<p>{props.trip.info}</p>
</div>
</div>
</>
Related
So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.
Here is all the code I have written related to the notification:
The HTML:
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
The CSS:
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification__container {
display: flex;
align-items: center;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
}
Here is the Output
Here is the Expected Output
Here are the solutions I have tried:
display: block;
margin-left: auto;
float: right;
text-align: right;
display: flex;
justify-content: right;
Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page
Thank You.
It's possible to massively simplify your markup as follows:
Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.
Some good resources here:
Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)
Any questions just drop me a comment and I'll try help out.
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}
.image {
width: 50px;
border-radius: 5px;
}
.align-right {
margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}
.round {
border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
<div class="notification">
<img src="https://picsum.photos/id/64/50/50" class="image round" />
<div class="notification-formatting">
<strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>
Base on your code you can set to
.align-right {justify-content: space-between; width: 100%; display: flex;}
and set 100% width to all parents divs you can see code bellow
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
width: 100%;
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification-formatting {
width: 100%;
}
.notification__container {
display: flex;
align-items: center;
width: 100%;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time></div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
Hey I'm new into CSS but I dont know how to make this work. Please help me on how to make this work.
The desired outcome.
My outcome.
The problem is how to make the heading come under the location tags. like in the figma design?
Here is the HTML.
import { GrLocation } from "react-icons/gr"
<div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="tags-colum">
<GrLocation />
<p>JAPAN</p>
<p className="underline-text">View on Google Maps</p>
<div className="container-text">
<h1>Mount Fuji</h1>
</div>
</div>
</div>
Here is the CSS.
.container {
display: flex;
align-items: center;
justify-content: center;
}
.main-img {
height: 168px;
width: 125px;
border-radius: 5px;
}
.tags-colum {
display: flex;
align-items: center;
margin: 20px 20px;
}
.container-text {
display: block;
}
.underline-text {
text-decoration: underline;
}
Your problem is .tags-column is display: flex, so you cannot group all 3 of those elements together. Because the default flexbox is row-based style which means it will align all elements on the same row
For the fix,
Create a group of that left image and all content elements (.container)
Separate the location icon and JAPAN to another group with flexbox (.tags-colum)
Put Mount Fuji separately (.container-text)
Note that, .new-group is just an alias name which I'm using for demonstration, and it has no specific styles
import { GrLocation } from "react-icons/gr"
<div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="new-group">
<div className="tags-colum">
<GrLocation />
<p>JAPAN</p>
<p className="underline-text">View on Google Maps</p>
</div>
<div className="container-text">
<h1>Mount Fuji</h1>
</div>
</div>
</div>
The issue is that you have used display flex to the .tags-colum ( which is the outermost parent) to fix this you can use flex-direction: column, yes adding this will make everything stacked up, so what's the solution?
group your elements like this
<div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="tags-colum">
<div className='gp1'>
<GrLocation />
<p>JAPAN</p>
<p className="underline-text">View on Google Maps</p>
</div>
<div className="container-text">
<h1>Mount Fuji</h1>
</div>
</div>
.tags-colum {
display: flex;
align-items: flex-start;
margin: 20px 20px;
flex-direction: column;
}
.gp1 {
display: flex;
align-items: center;
}
here is an example https://codesandbox.io/s/homepage-forked-g18lgm?file=/public/index.html:56-126
or you can completely remove the display flex from the tags-colum
I am trying to place 4 divs over a background image that would keep relative position and size as the browser is resized.
Here is the desired layout:
I have a big background (pink) that is placed with:
#screenFiller {
width: 100vw;
height: 100vh;
background-size: contain;
background-image: url("myimg.png");
background-repeat: no-repeat;
}
There are 4 main divs (red boxes). The two tops ones (side by side) contain a button each (blue boxes) with text (white squiggly lines) above the buttons but still in the red. I am positioning the divs next to each other using:
.flex {
display: flex;
justify-content: Left;
flex: none;
}
The main problem I am having is with the two top divs in that one is not keeping its height (it shrinks to content). I do understand that I will need to handle reducing the text size using a media query or something.
The stripped-down HTML looks like:
<div class="flex ">
<div class="boxme">
<div>
<p class="boldtext">Blha blah balh</p>
<div style="margin:10%;">
<button type="button" class="bigbut gborder5" onclick="window.location.href=''">Syart New</button>
</div>
</div>
</div>
<div class="boxme marl100">
<div>
<p class="boldtext">blah</p>
<div>
<button type="button" class="bigbut gborder5" onclick="window.location.href=''">Start New</button>
</div>
</div>
</div>
</div>
With boxme being:
.boxme {
background-color: white;
width: 25%;
height: 10%;
text-align: center;
}
Finally, all four divs are wrapped in a div with the following css
.relpos {
position: relative;
top: 36%;
left: 4%;
width: 85%
}
Please feel free to take me on an alternate path.
Bootstrap is available if that helps but currently, everything is just HTML and CSS.
Thank you in advanced for any consideration.
Normally, you never want to have fixed width, height, margin or paddings.
For your question, your flex values should be to put your content in the bottom left corner:
.container {
display: flex;
align-items: flex-end;
flex-direction: row; // default
}
Here is the full example that can be run as code snippet:
body {
height: 100vh;
}
body {
background-color: #fcf;
}
.container {
display: flex;
align-items: flex-end;
gap: 20px;
height: 100%;
padding: 20px;
}
.container>div {
background-color: #faa;
padding: 10px;
}
<div class="container">
<div>
<p>Text</p>
<button>Cick</button>
</div>
<div>
<p>Text</p>
<button>Cick</button>
</div>
</div>
I would strongly advise you to learn the fundamentals of html and css from other resources.
I'm trying to put 4 images in a flexbox div in a parent flexbox, with total height 100%, without stretching out of the parent flexbox. I've searched a lot, but I didn't found something useful.
I have made a minimum example:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<!--
Weird. Chromium (Chrome & new Edge) usually renders height 100%,
but not height-responsive; sometimes renders scroll bar.
Firefox always renders the scroll bar result.
-->
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
</main>
When opening this example, chromium-based browsers(Chrome, new Edge) usually render height 100%, the desired result, but it is not "height-responsive": the max height of the images remains fixed once the page is fully loaded.
What even worse is, sometimes they give the stretched result with scrollbar; and Firefox always give me the stretched result with scrollbar, which is not what I want.
Try opening this S.O. page in Chromium & Firefox, and run the snippet. The results are different, too.
Chromium (almost always left, rarely right):
Firefox (always):
Any way to achieve what I want? The wrapping div and parent div may be something other than flexbox. I just want the images staying in the div, with width-responsive & height-responsive.
Also, any reason why Chromium browsers' rendering results are not consistent? Is my example missing something?
I know I can use the background image technique, so I can put image in div without changing layout at all. But I want only the image part clickable, so there must be an image element there corresponding to the clickable area.
background-image example:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
background-color: yellowgreen;
}
a {
flex: 1;
background-image: url('https://imgur.com/ruE1EBV.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border: 5px solid red;
}
<main>
</main>
Edit:
Equal row heights in flex-direction: column is okay when the content inside doesn't contain any images. I think the tricky part is the images. They just stretch...
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid red;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
<div class="imgs">
hello
</div>
</main>
Well, I found an easy answer to fix this simple minimum example.
Just add overflow: hidden to .imgs, so images don't grow out of main.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
background-color: yellowgreen;
}
.imgs {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.img100 {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
<main>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
<div class="imgs">
<img class="img100" src="https://imgur.com/ruE1EBV.jpg">
</div>
</main>
Applying this to my actual, much more huge layout did fix my layout.
So all I need to do is to carefully inspect my overflows.
Why Chromium behaves differently: stackoverflow: Why do Chrome and Firefox show different flex layout results?
I'm working on a project where I have to create an online bookstore webpage using only HTML and CSS . I want to display "about us" information for the shop using a style like in the image below :
Basically I want to put an image and a text in the way displayed above . Using flexbox however I have trouble syncing the image and the text I have because I have difficulties setting the image width to cover half the flex container and the part of my text the other half .
This is my code :
.flex-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
background-color: orange;
opacity: 0.7;
}
.flex-container>div {
margin: 0;
width: 100%;
height: auto;
}
#fleximg>img {
width: 60%;
height: auto;
}
#about {
width: 50%;
margin-right: 300px;
height: auto;
}
<div class="flex-container">
<div id="fleximg"><img src="https://placehold.it/400x400" alt=d esk/></div>
<div id="about">
<!-- text i want to place next to image -->
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
When i run my page I get the picture below where the image and the text are not next to each other and I have trouble readjusting their sizes
I would appreciate your help with guiding me to solve my problem
First, if the image height is taller than the right-col content - even simple width: 100%; height: auto for the image could work.
div{
border: 2px solid black;
}
#fleximg img{
width: 100%;
height: auto;
vertical-align: middle;
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
}
#about {
flex-basis: 60%;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
tall image
<img src="https://placehold.it/400x700" alt=d esk/>
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
</div>
</div>
</div>
But the idea above it less useful for dynamic sites.
More responsive approaches:
By background image
For the "left-col" Use background-image and background-size: cover.
div{
border: 2px solid black;a
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
background-image: url("https://picsum.photos/1111/1300");
background-repeat: no-repeat;
background-size: cover
}
#about {
flex-basis: 60%;
padding: 100px 10px;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
</div>
By image element
Without using background-image for the left-col this idea is more "tricky".
For img element - One idea/solution is to use this "trick":
https://css-tricks.com/aspect-ratio-boxes/
Set image col "parent" position to relative and put inside an absolute image (100% width/height + object-fit: cover).
div{
border: 2px solid black;
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
top-padding: 100%;
position: relative;
}
#fleximg > img {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover ;
}
#about {
flex-basis: 60%;
padding: 100px 10px;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
<img src="https://placehold.it/400x400" alt=d esk/>
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
</div>
Important: From the design aspect - There is no magic solution to suit all situations. It also depends on the amount of content (text/images and so on) you place in the right "content" column and the width of the screen (min-width/height/padding/margin and Media query useful her).
You should set css class flex-container is width: 100% and #fleximg is width:50%, #about is width:50% and use the background in css instead for img tag.
Example:
.flex-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
background-color: orange;
opacity: 0.7;
width: 100%;
height: auto;
};
#fleximg {
width: 50%;
height: auto;
background: url('') center no-repeat;
background-size: cover;
};
#about {
width: 50%;
margin-right: 0;
height: auto;
};