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
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 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'm working with Bootstrap in Vue and I have three b-tabs that I'm having trouble styling. Right now it does
this when the screen gets narrow. I don't want this. I want it to do this when the widow is resized. By inspecting the elements, I found this and that by unselecting flex-wrap:wrap, it does what I want it to.
I have added
.nav {
display: flex;
flex-wrap: nowrap !important;
}
To my style, but the display is still stacking the b-tabs when the screen narrows.
Any suggestions on how to override the Bootstrap styling?
I was able to achieve the desired result by adding a min-width to the styling to the parent container.
I have put a demo of what I want to achieve with a flex layout here:
https://jsfiddle.net/airwalker/zjd730x7/
Essentially my layout works when using
{
display: inline-flex;
}
but not
{
display: flex;
}
In short I want the behaviour of the display: inline-flex where the container will resize to the child content but still be constrained with a max-width.
However I am using react-native which does not support the full flexbox specification, and does not support inline-flex.
What other way could I achieve my desired output using CSS?
Many thanks