I'm using grid to achieve this design (desktop is 1st image, mobile is 2nd image):
Problem is, the two left div text isn't divided evenly so the text is skewed to the top, rather than dynamically in the center. Tried using flex, but it doesn't work because of the mobile design.
You have multiple opportunities to achieve this. I think using grid system is quite good idea. But if you like simple solution you can use media queries.
.flex {
display: flex;
justify-content: center;
gap: 10%;
}
.txt {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mobile {
display: none;
}
.desktop {
display: flex;
}
#media (max-width: 60rem) {
.mobile {
display: block;
}
.desktop {
display: none;
}
}
<main class="flex">
<div class="txt desktop">
<h1 class="main-title">Main title</h1>
<h2 class="subtitle">Subtitle</h2>
</div>
<div>
<h1 class="main-title mobile">Main title</h1>
<img src="https://via.placeholder.com/200x300"
class="hero-image">
<h2 class="subtitle mobile">Subtitle</h2>
</div>
</main>
Related
I have a footer on the desktop screen, what looks like this:
but on tablets (width <= 960px) I need to create something like this using media queries:
The problem is, that i dont understand how to place divs correctly without using empty div
here is my code for desktop
jsx:
<footer>
<div className="footer-content">
<div className="col">1</div>
<div className="col">2</div>
<div className="col">3</div>
<div className="col">4</div>
<div className="col">5</div>
</div>
<div className="another-stuff">
another stuff
</div>
</footer>
and css:
.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 7%;
}
.col {
display: flex;
flex-direction: column;
}
Tried to use
.footer-content{
display: flex;
flex-wrap: wrap;
}
.footer-content .col {
flex: 1 0 33%;
}
but divs 4 and 5 was moved in the middle of the page.
use css flex property which is "nowrap".
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
My goal is to have three responsive columns using flexbox. Currently, when resized, the columns can go left to right or up to down. I'm trying to make the three column layout go into a two column layout with the third column centered below the first two. However, the first and second columns don't go next to each other.
I google this and looked at other examples and tried to implement them, but I'm not sure why it still isn't working.
How can I fix this? Thanks in advance.
Link to my codepen: https://codepen.io/sbarclay7/pen/ZEQZvaj
html {
height: 100%;
}
body {
color: #FFFFFF;
text-align: center;
}
* { box-sizing: border-box; }
.wrapper {
padding-top:2.1rem;
display: flex;
padding-bottom:2.2rem;
max-width:40%;
justify-content: center;
margin:auto;
}
.category {
display: flex;
flex-direction: column;
width: 16rem;
flex: 1;
background-color:#203a8a;
border-radius: 0.7rem;
border: 1.5px solid rgb(5, 30, 37);
}
.flex {
display: flex;
flex-wrap: wrap;
}
#media (max-width: 1000px) {
.wrapper {
flex-direction: column;
flex-flow: column wrap;
}
.category {
width: 49%;
}
}
#media (max-width: 700px) {
.wrapper {
flex-direction: column;
}
.category {
width: 100%;
}
}
<div class="wrapper flex">
<div class="category" style="flex-basis: 4rem;" >
<h3>Header 1</h3>
<p>a</p>
</div>
<div class="category"style="flex-basis: 4rem;" >
<h3>Header 2</h3>
<p>a</p>
</div>
<div class="category"style="flex-basis: 4rem;">
<h3>Header 3</h3>
<p>a</p>
</div>
</div>
I noticed you modified the flexibility of the flex property by setting a flex: column property using media queries. This is currently affecting the resized display you are getting.
Remove the flex property added in the media queries and it should work just fine.
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>
From min-width of 769px to 1025px, I want the 3rd figure on a new line while the first and second figures remain on the top line taking up equal space. I'm attempting flex boxes in css. How do I get this to work?
<div class="mid-col-section-2">
<figure><img src="images/landscape-maintenance.jpg" alt="landscape" height="300"><figcaption>Landscape Maintenance</figcaption></figure>
<figure><img src="images/landscape-design.jpg" alt="landscape" height="300"><figcaption>Landscape Design</figcaption></figure>
<figure><img src="images/masonry-design.jpg" alt="landscape" height="300"><figcaption>Masonry Design</figcaption></figure>
.mid-col-section-2 {
display: flex;
flex-direction: column;
}
.mid-col-section-2 figure a {
color: black;
}
figcaption {
text-align: left;
}
#media (min-width: 1025px){
.mid-col-section-2 {
flex-direction: row;
justify-content: space-between;
padding: 10px 60px 10px 60px;
}
figcaption {
text-align: center;
}
.mid-col-section-2 figure {
padding: 15px 0 15px 0;
}
}
It seems like you might want to brush up on flexbox properties. You're throwing a lot in there that you probably don't actually want.
I revised your markup since the <figure> tag has default styles applied to it by the browser:
<div class="mid-col-section-2">
<div class="mid-section">
<img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Landscape Maintenance</figcaption>
</div>
<div class="mid-section">
<img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Landscape Design</figcaption>
</div>
<div class="mid-section">
<img width="100%" src="http://jonvilma.com/images/landscape-3.jpg" alt="landscape"><figcaption>Masonry Design</figcaption>
</div>
</div>
Then I tidied up your CSS:
#media (min-width: 769px) and (max-width: 1025px){
.mid-col-section-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mid-section {
margin: 0;
width: 45%;
}
Here's the result: https://jsfiddle.net/qdoxL23p/embedded/result/