This is a "newbie" project that i'm studying with, and im trying to work mobile first so i go to desktop flow
When i try to implement the media query for desktop flow, elements don't fit the screen (screen is scrolling even if the elements could fit)??
I tried to change the height of ".container" using percentage but it didn't work as well. The screen is always scrolling while desktop flow, i want that elements fit the entire screen (no scroll page)..
`
<body>
<div class="container">
<div class="cont1">
<header>
<h1>Learn to code by watching others</h1>
</header>
<p>
See how experienced developers solve problems in real-time. Watching
scripted tutorials is great, but understanding how developers think is
invaluable.
</p>
</div>
<div class=" cont2">
<p class="container-blue-p">
<strong>Try it free 7 days</strong> then $20/mo. thereafter
</p>
<form action="#" id="form" class="form">
<div class="form-control">
<input
type="text"
name="firstname"
id="firstname"
placeholder="First Name"
/>
<i class="fas fa-exclamation-circle"></i>
<i class="fas fa-check-circle"></i>
<small>Error Message</small>
</div>
[...]
</div>
</body>
#media(min-width:1200px) {
body {
background-image: url(images/bg-intro-desktop.png);
}
.container {
display: grid;
grid-template-areas: "container1 container2";
grid-template-columns: 50% 50%;
max-width: 1200px;
}
.cont1 {
display: flex;
align-items: flex-start;
justify-content: center;
grid-area: container1;
}
.cont1 header {
max-width: 50%;
}
header h1 {
text-align: start;
}
.cont1 p {
max-width: 90%;
text-align: start;
}
.cont2 {
margin-top: 0;
grid-area: container2;
}
.cont1,
.cont2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.container-blue-p {
display: flex;
flex-direction: row;
height: 3em;
}
}
`
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>
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>
</>
I am currently learning basics of web development and I wanted to create a simple webpage with a navigation bar, two main div elements and a footer. Ideally I would make it responsive to the window's size and when the user resizes it one of the three divs should go below the remaining two. Analogically, after further rescaling they would end up in a vertical line.
HTML code snippet:
<div class="bottom-container">
<div class="clock first-two" id="clock1" data-clock>
<p class="border">Add 1</p>
</div>
<div class="clock first-two" id="clock2" data-clock>
<p class="border">Add 2</p>
</div>
<div class="clock" id="clock3" data-clock>
<p class="border">Add 3</p>
</div>
</div>
CSS:
.bottom-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
.clock {
margin: 2% 0;
padding: 200px 150px;
height: 100%;
align-self: center;
}
#media screen and (max-width: 1150px) {
.first-two {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
#media screen and (max-width: 770px) {
}
When I wrapped clock1 and clock2 in a separate div so that after first resizing 1 and 2 would stay in the same line and 3rd would go below them. Please see the screenshots for reference(I disabled 3rd div in the 2nd picture to demonstrate my desired effect).
First Image
Second Image
Thank you.
Add flex-wrap: wrap to bottom-conatiner -
.bottom-container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width: 100%;
}
The flex-wrap property specifies whether the flexible items should wrap or not.
As a side note, I removed flex-direction: row because it's a default.
Are you looking for something like this?
* {
box-sizing: border-box;
}
.bottom-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
}
.clock {
padding: 200px 0;
flex: 1 0 50%;
border: 1px solid black;
}
#media(min-width: 800px) {
.clock {
flex: auto;
}
}
<div class="bottom-container">
<div class="clock first-two" id="clock1" data-clock>
<p class="border">Add 1</p>
</div>
<div class="clock first-two" id="clock2" data-clock>
<p class="border">Add 2</p>
</div>
<div class="clock" id="clock3" data-clock>
<p class="border">Add 3</p>
</div>
</div>
I'm sure this is a duplicate question but I've eliminated almost everything from my code and still can't get it to work. I am new to Flexbox and tried to follow the code at https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ (as an aside, even that code doesn't work!). I am using Safari 11.1.1 and Chrome 67.0.3396.87 so it's not that they're old browsers.
I'm trying to center a <div> horizontally and vertically on the screen. The div contains a form which contains a couple of inputs and a button. I'm trying to center each of this horizontally and the group should be entered vertically within the <div>.
In Safari,nothing is centred. In Chrome, the div is centred horizontally but not vertically, but the inputs/button are not centred either horizontally and vertically.
body {
background: grey;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background: white;
}
<div id="holder">
<form action="">
<input type="text" placeholder="something">
<input type="text" placeholder="something else">
<button>An Action</button>
</form>
</div>
What am I missing? As said, even the sample code from the site mentioned above didn't work correctly, so I'm quite stumped.
You need to set height:100vh in body, or set height:100% on html,body
And center items in forms, use flexbox properties in form instead of #holder
body {
margin: 0;
height: 100vh;
background: grey;
display: flex;
justify-content: center;
align-items: center;
}
#holder {
width: 300px;
height: 300px;
background: white;
}
form {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
form>* {
margin-bottom: 20px
}
<div id="holder">
<form action="">
<input type="text" placeholder="something">
<input type="text" placeholder="something else">
<button>An Action</button>
</form>
</div>
I'm currently developing my first website. I've come to a point where I have two divs placed next to each other inside of a flexbox. Both divs have a width and height size in percentages. When I shrink the website, however, the right div overlaps the left div. If they're going to overlap I want them to be placed underneath each other. (It's about the right-side-content div overlapping the left-side-content div)
I've included my HTML and CSS code.
HTML:
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster"/>
</div>
<p class="top-title">Banner and endcard</p>
<h1>STER</h1>
<p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
<button class="view-project-button">View Project</button>
</div>
</div>
<div class="right-side-content">
<img src="images/sponsorloop-collage.png"/>
</div>
</div>
CSS:
.content {
display: flex;
align-items: center;
height: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.content .left-side-content {
width: 30%;
height: 100%;
display: flex;
align-items: center;
}
.content .right-side-content {
width: 70%;
display: flex;
align-items: center;
justify-content: flex-end;
}
Add the flex-wrap property to .content.
Also, instead of using width for left and right content, use flex-basis instead, or incorporate it into the shorthand flex, as in the snippet below...
.content {
display: flex;
align-items: center;
height: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
.content .left-side-content {
flex: 1 0 30%;
height: 100%;
display: flex;
align-items: center;
}
.content .right-side-content {
flex: 1 0 70%;
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster" />
</div>
<p class="top-title">Banner and endcard</p>
<h1>STER</h1>
<p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
<button class="view-project-button">View Project</button>
</div>
</div>
<div class="right-side-content">
<img src="https://placehold.it/300x300" />
</div>
</div>