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
}
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 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.
I am updating 2 images by click, each one probably has a different size and ratio every time. When one of them changes, the other one follows. I have them far enough from each other, so they do not need to do that. I want to them independent, stable.
I tried with and without flex-box. The same thing happens always. The only thing that works is setting position to absolute or fixed, but it destroys the appearance of course.
section{
display: flex;
flex-direction: row;
background-color: #fff;
height: 100%;
}
#dog1, #dog2{
display: flex;
max-width: 400px;
align-self: center;
margin: 0 auto;
}
Thanks everybody who checked it. I noticed that the problem appeared when the width was changing, so instead of max-width, I set a spesific width to the images. Still, if I wanted the width to be random and unique for every picture, it would not work. But, at least, they are stable now. If anybody has an idea how to do that though, it would be perfect.
i need some CSS only code that will use the flexbox and a media query to change with screen size... I want the comment boxes on my page to be moved to the left while the browser is open on a large screen or window. then when the browser window gets smaller i want the comments to shrink a little only down to about 300px where they wont shrink any more
I have linked below two screenshots of what it looks like now and roughly what I am trying to achieve (preferably with the comment boxes being longer as well)
Thanks
Not sure what your layout is like, but mess around with these properties and feel free to read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Flexbox Froggy is also a great game for familiarizing yourself with flexbox
https://flexboxfroggy.com/
main {
display: flex;
justify-content: flex-start'; // this will align the items to the left/start of the parent
}
.comment-box {
width: 33%; // or whatever you want the width to be. Percentages are responsive
}
#media(max-width: 960px){
main {
justify-content: center;
}
.comment-box{
width: 95%
min-width: 300px
}
}
I've recently changed my blog's theme and this new theme didn't center galleries at all until I managed to fix this with some CSS. However, there's still a problem with the last row if it doesn't have as many images as previous ones. (example: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)
As you can see in the example, I inserted a 3-column gallery with 2 rows, but the last row only has two images. I would like the last row to center the images so it looks nicer. So whenever the last row has fewer images, I would like them centered.
Any help would be greatly appreciated.
Thank you!
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.