I am pretty new to HTML/CSS and have begun trying to learn CSS flexbox layout. Just working on a simple site recreation from scratch using flexbox.
In full screen, the image positioning on the logo looks good. However, when shifting around the screen size, my nav bar on the right side responds but the logo image on the left does not. I believe I have set it up correctly though.
.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}
.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}
Here's a link to my work as well: https://codepen.io/gkunthara/pen/VWdrYj
What exactly am I doing wrong? Any tips on the type of positioning I'm doing with flexbox or with flexbox, in general, are appreciated!
Remove Position
.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}
Remove position on nav & set max-width: 100% on logo image.
https://codepen.io/thesumit67/pen/bRKYLx?editors=1100
Related
I am currently trying to fix an issue where when I make any divs under my nav it goes to the top left of the page. If I put a padding-bottom on the nav it fixes the issue, but I'm trying to make the page responsive and not have to play around with padding numbers.
https://codepen.io/gmorabito/pen/JjMMdOj
nav{
position: fixed;
top: 40px;
width: 95%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
z-index: 9999;
border: 1px solid black;
border-radius: 10px;
margin-left:2.5%;
z-index: 1;
}
make the nav position:static and add 25px to margin-top. Absolute positioning should be avoided as much as possible. It takes the element out of the flow of the dom and makes responsive websites much more difficult
I was trying to build a web page and I started with some css I found online .
When I'm trying to add new div in the body it keeps appearing under the navbar.
I know it's related to position but I couldn't figure out a solution.
wrapper{
background: #171c24;
position: fixed;
width: 100%;
}
.wrapper nav{
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
}
nav .content{
display: flex;
align-items: center;
}
https://jsfiddle.net/24d1keht/
Sorry , I couldn't post all the code here. Thank you.
Set the margin-top property of your body to the height of your navigation bar and then set the absolute position of your navigation bar to the very top of the page (so it isn't affected by the new margin), with the top property.
The CSS would look like this:
body {
margin-top: 0;
}
.wrapper {
top: 0;
}
I have the code here but basically the problem is I have these product cards and I am trying to get them in the center but also align them with the other cards if that makes sense.
https://codepen.io/manfreebie/pen/NWNvyGz
Here is a visual of what I want to accomplish vs. what is actually happening. It looks fine at first till you try to resize it.
I have tried to make the cocktail-container have the value flex-start instead of center for the justify-content attribute like this
#cocktails-container {
max-width: 70%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
but that leaves a lot of whitespace on the right side when I resize it. I have tried playing around a little bit with inline-block and using text-align instead but that didn't work either.
Add this code.
#cocktails-container::after {
content: "";
flex: auto;
}
I am only sharing parts that I changed, the rest is the same.
#cocktails-container {
width: 70%; // You can adjust this for your needs
display: flex;
flex-flow: row wrap;
justify-content: start;
}
// Removed margin from .cocktail but added padding to the a tag
.cocktail {
width: 100%;
height: auto;
padding-top: 10px;
text-align: center;
}
a {
width: 33%; // You should adjust this for different screen widths, mobile 100% large 25% etc.
padding: 15px;
box-sizing: border-box; // This is necessary to include padding in '33% width'
}
Please try this code,To How do I center these items properly?
.box {
display: flex;
align-items: flex-start;
height: 200px;
}
.box .selected {
align-self: center;
}
<div class="box">
<div class="selected">Three</div>
</div>
I hope this code will be useful for you.
Thank you.
The issue that I identified while checking the code is that you are using a margin margin: 50px 0px; for the .cocktail class. Change it to the below one.
#media (max-width: 800px) {
.cocktail {
width: 60%;
margin: 50px auto;
}
}
Giving margin value 50px 0px; will make the left and right margin to zero in the samller resolution. Update that to 50px auto that will give left and right margins auto value.
Lately I was creating a searchbox for my website, but I wanted it to be constantly centered in every y and x dimension.
I have div container searchbox:
.searchbox {
position: absolute;
text-align: center;
width: 100%;
left: 0%;
top: 55px;
height: 115px;
background-color: black;
}
Inside searchbox container, I made special mover container:
.mover {
margin: 0 auto;
width: 50%;
}
As you see width is 50% because I thought it would center it, but it didn't, and margin is automatic, which I don't think even works without 50% width.
Full code and Result.
I think my style is kinda messed up and there are useless things which may affect automatic margin.
What may the problem be? does margin: auto; doesn't work with current position of div? What do I need to change? If not, what's the problem?
I will be very thankful if you upload solution on my current fiddle.
UPDATED ANSWER
Here is correct code: https://jsfiddle.net/uda77168/7/
First...
1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.
Center Vertically
1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.
html, body {
width:100%;
height:100%;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. Next, we need to define <body> as a flexbox and give it some flexbox properties:
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can just copy-paste flexbox code like the one above from here.
Center Horizontally
1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):
<div class="horizontal-flexbox"></div>
.horizontal-flexbox {
width: 100%;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.
.horizontal-flexbox > div {
width: 33.3%;
margin-top: 10px;
}
3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!
Your input.search class has a specified width in px which is larger than the container.
.search {
width: 100%;/*changed this line*/
height: 35px;
margin-top: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.
Use this:
.searchbox {
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
}
And
.mover{width:50%;}
Trying to make a grid system with divs and I can use Text-Align Center but it just doesn't work as well. If I use the flex css the div's just ignore the barrier I created where it's suppose to break up the div's. The problem with not using flex is that I cant use margin to have the edge of the divs aligned with the logo and nav bar's end.
http://tsuts.tskoli.is/2t/2809984199/skapalon/ - Hosted here
If you check the css you can see two container divs, one whom is commented out and the other one is being used. The one who is being commented out is being using flex and the one I'd like to fix.
All help is much obliged, Thanks in advance.
/*.container{
display: flex;
justify-content: space-between;
min-height: 100vh;
width: calc(100vw - 500px);
margin: 0 auto;
}*/
.projectskort{
display: inline-block;
margin-top: 10px;
width: 224px;
height: 270px;
border-radius: 3px;
background-color: white;
}
Remove both your .container classes and replace them with
.container{
min-height: 100vh; /*Remove to see the difference*/
width:72%; /*Modify it for your needs*/
margin: 0 auto;
display: flex;
flex-wrap: wrap; /*Recommended property*/
justify-content: space-between;
}
.projectskort{
display: flex;
margin-top: 10px;
width: 224px;
height: 270px;
border-radius: 3px;
background-color: white;
}
That's what i understood from your question