I am creating a section in a website with three divs. I'm displaying the divs in one line with display flex and orientation row.
To make the design responsive, I want it to appear as a column as the screen size decreases. In the media query, I'm setting the container to flex-direction: column; but it's not working as intended. Two divs appear in a column, while the middle one is on the side. I have no idea why it is not working when in my last project I did the same thing and had no issues. Link to the code below so you can see what I wrote:
https://codepen.io/DanDiaz/pen/PopmOdq
.grid {
height: 95vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
}
I think thats due to the 'flex-wrap: wrap' on class .grid!
If you remove this property, it works :) Just need to set the proper image height then.
Related
So as I am learning flexbox, i am experimenting with justify-content: flex-end and it comes to no avail, I want to use flexbox to move the content of the header tags to the right hand side without using padding.
my code is uploaded on gitub on: https://github.com/SmileyFaceImoji/Landing-Page
I highlighted the div that holds the header links in green to see if i didn't reference the proper tag and i did
the goal is that i make a landing page similar to this: https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/01.png
Not sure if this is what you wanted but from looking at your image I believe you wanted this
Just add following codes
This codes places your items at end of your flex box + makes sure your items don't go too wide on large screen
If you have smaller screen, you can test this using command & - on Mac, Alt or CTR on Windows
.hero {
max-width: 1000px;
margin: auto;
}
.header-links {
width: 100%;
justify-content: flex-end;
}
I really need your help here. I am very new to this Front End work and have submitted few questions related to this issue.
I am building an UI using react js. Where i display the cards for products and resources. I am using display flex in the container and making it center justified. But the issue is
I want to limit 4 cards per row
The width and hight of the cards to remain same irrespective of screen size
I have two sections where i display cards, at first place i am displaying 8 cards and the second place i am displaying two. I want the cards should start from same position in the UI
Alignment issue with header section
Here is the code and Demo: https://codesandbox.io/s/527rx9
Here is how it looks currently
I got some feedback from other questions i had pasted to use width to 1500px. But deep down i feel , not a right way and will break in some screen. But in this case as well i see alignment issues. below image by using 1500px in container width
Really need your help here to have a fix around it. If you are willing please paste the codesandbox or anyother link with a working code.
Regarding your container css for the grid:
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* width: 1500px; */
}
It's no problem setting a max-width and you should do it, however dont use a specific width, instead set the max-width to 1500px if that's your desired max-width
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1500px;
}
However i would recommend putting all the content below your banner inside of a div
<div class="content-container">
And setting the CSS of that one to the max-width in order to avoid some indentation problems to solve this specific problem
I would like to display my clients first and last name in 2 different inputs in the center of the client page and give each input a minimum width to avoid extra spacing between the two.
I've tried to use min-width or use the "size" attribute for the inputs but it's causing problems when the first input has too much characters.
<div className="input-client-name">
<input value={this.state.fname}/>
<input value={this.state.lname}/>
</div>
.input-client-name {
display: flex;
}
.input-client-name input {
min-width: 0;
max-width: min-content;
}
I expect the output of: " firstName LastName " without worrying from the characters length of each of the ones.
If you're working with flexbox, it's advised to not play with width since we flexbox for achieving responsive behaviour and setting width (even max and min widths) to a value defeats that purpose.
Since you want input boxes displayed side-by-side, and based on window size - you may want to wrap second input box to next line - add a flex-flow to your parent.
.input-client-name {
display: flex;
flex-flow: row wrap;
}
flex-flow is a combination of flex-direction and flex-wrap properties.
Next, you want to give a min width to your input boxes, you can achieve this by using flex-basis - which works as an initial size for your element.
.input-client-name input {
flex-basis: 40%;
margin: 8px;
}
Note: margin is added as space between two input boxes. You can choose to use justify-content: space-between or justify-content: space-evenly for same purpose.
Additional references:
A demo fiddle for this is availale here.
Want to learn more about flexbox? Read a nice article on it here.
Hope this helps.
input {
text-align: center;
width: auto;
}
Right now, my app looks almost exactly how I want it too via larger screens. https://imgur.com/a/MCe5D - As you shrink the screen size down, the two columns (trending up and trending down) will get closer and closer until they are just about touching, which is great. But at that instance when they no longer get any closer, I would like to have the Trending Down and it's contents move underneath the Trending Up column, to be more mobile friendly. Here's a pen showing the area that is being affected.
//The whole area surrounding the two columns
.playersColumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-left: 150px;
padding-right: 150px;
padding-top: 25px;
overflow-y: scroll;
}
//The two columns of player info
.playersBody {
overflow: auto;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
min-width: 255px;
}
That pen isn't very useful, but it shows my exact code and which tags are where. I tried putting the 2nd column of player info and trend header inside of the first one, but that just made it one large column (which is what I want, but only when the screen is shrunk)
Any help is appreciated — if there is a better way to display the code or layout, let me know.
I recommend looking into Media Queries.
Here is a short video to show you the basics.
You can set a threshold that will trigger separate styles under those conditions. It can be very useful when you want your UI to do something different at different sizes.
#media only screen
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) {
//css goes here with whatever css you want to fire at this threshold
}
I've been trying to create this webpage off a course from udemy. If you take a look at the picture you'll notice that at the bottom at the GET INVOLVED section, my buttons and texts are not aligned. I need advice on how to make these columns even so that the buttons are aligned. Should I use margin/padding or is there another way?
Assuming that the description is written in a div try giving min-height to that div
An age old question indeed: how to make 2+ divs the same height?
There have been many hacks and workarounds, but nowadays flexbox comes to the rescue.
#wrapper { /* Something around those 3 columns */
display: flex;
}
.pill { /* Every column has this class */
flex: 1;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: column;
}
Example on JSFiddle
Before using this example, I would recommend reading something about flexbox, maybe this exhaustive guide.
As stated below in the comments, there are some issues with cross-browser support at the moment. More details here