I have this Custom HTML module with 9 flags inserted in the position mainmenu as you can see here www.jornaldalusofonia.pt
How can I give it CSS instructions so it stays vertically aligned in the middle of the bar.
Thank you,
Rui Farinha
Using Flex this is quite simple, just do the below:
#jsn-pos-mainmenu {
float: left;
display: flex;
align-items: center;
justify-content: space-between;
}
And then remove the extra margin top on the form input:
.jsn-modulecontainer[class*="display-"] form {
margin-top:0;
}
NOTE: You must prefix your CSS for flex using autoprefixer tool, or any tool you choose. Also note that flexbox does't work with older verisons of IE9 and below , also older versions of safari.
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;
}
Site URL: https://anthonysavarese.com/my-photos/
image of stacking buttons
Hi, how I can prevent the buttons in the link above from stacking on mobile? I'd like to have them center-aligned and on the same row.
I tried adding different pieces of CSS code I found online and none of them have solved it. I also tried adjusting the HTML tag from div to the other options and haven't had any luck.
display: flex is your best bet.
But you could also use display grid as an option. Below is a snippet using display flex.
#media (max-width:768px) {
.gutentor-element-button-group-wrap {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom:30px;
}
}
Adjust the 768px breakpoint to when you'd like the mobile view to trigger.
And the margin-bottom:30px is optional.
I added it to give you some space at the bottom.
If you want to learn more on display flex, here is a deeper dive into its logic. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
I am essentially trying to imitate float: right with images in a row and I am getting a mysterious space above the parent item when I do it. I am using flexbox in the elements and I tried to achieve the float: right type functionality by using the order: 2 property. Here is a screenshot:
A live sample of the app can here: removed link, because in development, forgive the long load times. Just click "play"
Since there are two app-team components inside app-game component make app-game as a flex container so app-team components will be flex items.
.app-game-class {
display: flex;
/* align-items: center; */
justify-content: center;
}
I am trying to put the social icons to center, but without any result. Someone who knows what I can do to make them in center? https://postwork.se - I am talking about the social icons in the footer
Easiest way it to add this style to the p enclosing them.
First add a class to the p, like this:
<p class="social-icons-footer">
Then add the style in your css file:
.social-icons-footer {
width: 250px;
display: block;
margin: 0 auto;
}
You could utilize
/* style for div parent of links */
div {
display: flex;
justify-content: space-around;
}
To do that wrap all the links in div and apply this to it. See screenshot below.
But in order for it to work properly wrap all images with
<a>
tag.
Notice that flexbox is not yet supported in older browsers in case you require to support them.
screenshot of display: flex
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