I'm a little stuck with this problem: I have a nested image container that contains three images per row, three rows. I need it to be centered. I tried text-align on the parent container but it doesn't work so I used flex property align-items: center; but instead of aligning itself on the center of the page, the image container overflows to the right making it scrollable.
I've tried inspecting the page in Google Chrome but I can't seem to find what element was causing it. Here is a snapshot with the align property unchecked:
enter image description here
Here is what happens when I tick it:
enter image description here
Here is also my code in Codepen if you need to check it out:
https://codepen.io/asparagus-inator/pen/dyOrNmv
I've been looking at my code for hours now and I'm at a loss as to what causes this behavior. I would really appreciate the help. Thank you in advance.
Your problem is in the img elements. Changing the img-row and gallery-img classes fix it. Just needed to set the width properly and justify the img-row content.
.img-row {
display: flex;
width: 100%;
height: auto;
justify-content: center;
}
.gallery-img {
width: 30%;
height: auto;
padding: 1%;
}
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
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
I have some ads I need displayed as rows of three within a div #ad-720.
I had it working then something changed and now they are all in a column. The footer is also cut off instead of being fullwidth. I've tried adding display: inline-block and a few other suggestions I've found here thru search but nothing is working.
I'd appreciate any guidance I can get. I'm mostly a graphics guy who gets asked to solve code problems here and there! ;)
http://www.cavallino.com/
Right now the CSS for the div is set to:
#ad-720 {
display: inline-block;
text-align: center;
padding-top: 10px;
padding-bottom: 0px !important;
}
For starters the display setting for the is set to block. Try setting it to inline. If that doesn't handle it, post the relevant HTML/CSS here and we will help you out.
I've been looking at this for the past days now and I'm at the point where I need to ask for help.
http://cub.northnodes.com/index.php/about/mission/
I need the donate now column to float all the way to the right, but it only goes halfway. I can't figure out why it's stopping there, there's no containing div that ends there. I've tried to take it out of the #center div, and have placed it both before it with no better results. Placing it after the #center div makes it float left all the way beautifully, but below the #center where I don't want it to be.
In case others come later:
I had a similar issue where float right would only move halfway across its containing div. Neither it, its siblings, or container had position relative. However, the containing div's prior sibling also had a child with a float: right; (coincidence that it was the last child; not sure?). I solved my problem by adding a clear: both; to the div containing the offending floater. This was on Chrome.
This happened to me because I had set max-width on a parent container. I removed that and my element floated all the way to the right properly.
In my case clear: both; didn't solve a thing. Somewhere above there must have been a margin-right: 2em or something like that which was being carried over.
In my CSS then I just had to insert margin-right: 0px; and the image was then flush to the right side of the page.
Had a similar issue, Items were floating right/left/center (just not all the way right or center).
I fixed it by putting justify-content: space-between; in the parent container.
My final css for the parent looks like:
parent {
position: fixed;
bottom: 0px;
width: 100%;
display: inline-flex;
justify-content: space-between;
}