How to reduce the space between li horizontal elements in my code, I've been trying to do it by changing padding and margin attributes (I have already tried setting those attributes to negative values, but it didn't help).
Below is the code that I'm trying
footer li {
display: flex;
flex-wrap: wrap;
width: 300px;
flex-direction: row;
justify-content: space-around;
font-size: 20px;
padding-right: 70px;
list-style: none;
margin-left: 10px;
}
Justify the parent of the list (not the list) to start and that gives you control over the list - the lists will now be flexibles of a flexed parent - you should be able to whatever you want with the lists if you follow this guide
First of all, the line "display:flex" has changed the display - so you are really not working with a normal list any more.
Secondly I can see you set "justify-content: space-around;" that has limited the ability of "margin" in your code;
Change "space-around" to "flex-start" and add margin as desired, or let "space-around" do its work
So here is the answer, maybe it will be of any help to those who don't know how to close the gap between li elements. Just add this property to your code and it will help you to reduce the space between elements. footer li:not(:first-of-type) { margin-left: -25px; } Problem solved and I would like to thank everyone for the help.
Related
I can't figure out where the whitespace (highlighted with yellow), right from the user icon, is coming from. I want the user button to only have a small margin on its right.
If I try to inspect it (see image bellow) it says it's part of the ul element but I can't find the issue.
I don't know what snippet to share because I'm not sure where the problem is but bellow is the CSS of the ul element, the entire CSS and the HTML where the ul element is.
The HTML:
https://github.com/NezaVizintin/Swapet/blob/master/Views/Shared/_Layout.cshtml
CSS specifically for the ul element:
nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: unset; }
This entire CSS:
https://github.com/NezaVizintin/Swapet/blob/master/wwwroot/css/custom-swapet.css
Though Your question was not that clear but based upon my understanding I can give you these solutions.
In the second Image the green portion is the left-padding for the <ul> tag you can remove it by just setting the padding-right:0.
Talking about why there is the yellow marked space to the right of your user ? , it is because you have set the justify-content to start - which forces your <ui> element to strictly align towards the left of the container leaving that yellow space to the right.
A possible solution to this can be setting the justify-content to space-between-which will let all of the li to be equally spaced and also makes your user align to the right removing that yellow space and then you can add a little margin to the right if you want.
Proposed Changes to CSS
nav > ul {
display: flex;
flex-direction: row;
justify-content: space-between; /*proposed changes*/
align-items: center;
margin: unset;
padding:0; /*proposed changes*/
}
Here,
I don't know the exact problem but and padding: 0 will solve your problem.
nav > ul { /*all elements together on navbar*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
margin: unset;
padding: 0;
}
Let me know if it does not works for you.
Top: Current situation, Bottom: What I'm trying to acheive
I am attempting to modify the language switcher at the top of this Wordpress-based website so that both the flags display next to each other, inline, without having to first hover.
https://www.furuhostel.com/
I can't figure it out, so was wondering if anyone could help? Maybe it's not possible with CSS!
Thank you!
Make these changes in your code, change these classes.
#trp-floater-ls.trp-floater-ls-flags {
width: 100px;
display: flex;
justify-content: space-around;
left: 75%;
}
#trp-floater-ls-current-language {
display: none !important;
width: 100%;
height: 100%;
}
#trp-floater-ls-language-list {
display: flex !important;
}
I have inspecting the element within chrome as no code has been supplied for this example but from what I can see you need to:
Remove the currently selected item trp-floater-ls-current-language (I did this by just display:none).
Where the class trp-language-switcher-container is, you will need to remove the defined width of 50px so that the container takes the size of its children.
And lastly you will need to set the class trp-floater-ls-language-list to display: flex.
Hope this helps and is what you are looking for.
I am using the Vali Admin theme and I am trying to push the last list item in the left sidebar to the bottom.
I have barely used flexbox before so I am not familiar with it at all, but I changed the menu to display: flex and then followed this answer to try to push the last item to the bottom. I am trying to do exactly what the person in that question if after.
These are my modifications to the theme:
.app-menu {
#extend .app-menu;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
li:last-of-type {
margin-top: auto;
}
}
Working fiddle.
I think the problem is that the menu isn't using as much height as it can.
I would gladly include a working snippet but for the love of my I couldn't figure out how to create a jsfiddle. It doesn't allow local files and it would block my gist. Same with Codepen.
Add the following on .app-sidebar:
display: flex; // make sidebar a flexbox
flex-direction: column; // so it will align column direction
We do the thing above so we can apply flex related styling on the child.
This will make the parent or sidebar a flexbox, then add the following on .app-menu
flex: 1; // this will take all the remaining space on the sidebar
and remove padding-bottom on .app-menu so the last item will stay in the bottom without the padding.
try this
.app-menu {
margin-bottom: 0;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
height: 100%;
if last item need to be displayed at the bottom of the page. try by setting height:100% to the ul
It's right to do as it described in link you've attached.
But you didn't set 100% height for your ul.
Setting height: 100%; to .app-menu class solves your problem.
Here is the working example based on your code:
https://jsfiddle.net/zewx18ps/1/
I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.
Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.
The snippet below will hopefully clarify what I'm struggling with.
Let me know if you need me to clarify further. Thanks!
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.row {
flex: 0 auto;
height: 100px;
margin: 0;
}
#lighticon {
padding-bottom: 30px;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {}
}
#media only screen and (min-width: 760px) {
#qwrapper {
justify-content: space-between;
margin: 10px;
}
#lighticon {
position: relative;
margin-left: 100px;
}
}
<div id="qwrapper">
<h3 id="michelle" class="row">"She always thinks of her clients."
<br>
</h3>
<img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" class="row" alt="" id="lighticon" />
<h3 id="jerry" class="row">"Very smart, creative person, problem solver."
<br>
</h3>
</div>
The justify-content property uses the available space on the line to position flex items.
With justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.
You wrote:
I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.
With space-between in row-direction, you would have to control the width of the flex container. So if you want there to be less space between flex items, then you would need to shorten the width of the container.
Or you could use justify-content: space-around.
However, these solutions are suboptimal.
The right way to go about this would be to use margins.
You wrote:
Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.
Use justify-content: center then use margins to space them apart.
My solution was :
put dummy empty divs in between with a max-height specified
change space-between to flex-start
set the content blocks to nogrow
set the dummy divs to grow
Then the spaces grow up to a max specified.
The approach with using margins is not a universal solution if you want space-between, because it would set a margin on all the flex-elements, also on the first and last elements on a line or column. Using :first-child / :last-child/ :nth-child() selector doesn't help when flex-wrap: wrap is set, because you can never tell which elements will be first and last on a wrapped line or column.
A selector like :wrapped would be helpful, but sadly it doesn't exist.
So my conclusion is that when you really want to unleash the flexibility and responsiveness of the flexbox, you can't control the margins… Missed opportunity of the spec I'd say.
I find myself adding right margin to all the boxes (in this case three)
.three {
margin-right: 2%
}
and then getting rid of it so the last box aligns right
.three:nth-child(3) {
margin-right: 0%;
}
but every time I do this I think "there has to be a better way, something baked into flex-box...this works but it seems like a workaround?
You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/
I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.
Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.
Is this possible? Thanks for any help.
I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.
Example
CSS
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
jsFiddle.
jsFiddle with one more li, you'll notice the CSS is constant :P