This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
Since I'm not a native English speaker its difficult to explain the problem with words. Please refer to the image I will explain to my problem below.
Currently, I'm using bootstrap 4, But If this can be done by pure CSS HTML that's also fine.
The issue is the column card's title and paragraphs words count different to each column card. But these things must be archive developing the layout.
All titles should align to the top & should be in the same line.
All paragraphs should align to the top after the title but all paragraphs should be aligned in the same horizontal line.
All buttons (Green squares) align to the bottom of the card.
I have done this using min-height in CSS. But when it comes to short titles & short paragraphs. UI is not so great.
Please show me the direction how to do this.
Thanks in advance.
The way I see it, you'll have to combine bootstrap card and Flexbox to achieve this. Or you can just use flexbox and put the element into each flexbox and justify-content: flex-start; and align-content: space-between; for it.
User overflow properties when length is more than a height on your paragraph, or try #media queries when the window's width is more than 992px
Links:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_intro
Related
This question already has answers here:
Equal width flex items even after they wrap
(2 answers)
Closed last month.
I was trying to create a side menu for my website and I have used flex property for the items in it but they don't look right with the current alignment, so I wanted to change the alignment and its justification but couldn't do it.
I tried different properties like align items, align text, align content, and even justify content and justify items but none of them helped me.
I want to align the items to left and justify it to make it look better.
This is the link of the repository in github: https://github.com/abhishek12221732/Music-Mania.git
The image of menu I am getting
Add:
align-items:flex-start;
To the flexbox containing the menu (in your code this is the div with the class of "leftmenue". To do this add align-items: flex-start; to this class in your mm.css file.
As other have said, it's best to copy (a piece of) your code here to github so that people can easier diagnose the problem and help you.
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I need to achieve the following layouts in CSS:
I've been trying flexbox but cannot get container 'C' to appear correctly on tablet width. I can reorder the columns using CSS order but the width of 'C' spans the full width of the page but it needs to be constrained to the same width as container 'A'.
I've setup a blank starter pen here because I can't post my project: https://codepen.io/ahdigital/pen/GRqpQRL?editors=1100
My question is, will this be possible with flexbox, or should I use another CSS approach? (Trying to avoid JS).
No.
By using nested flexboxes you can achieve a similar layout if the two boxes that align vertically to each other (A and C in this example) in tablet layout are adjacent, but that isn't the case here.
Use Grid to do the layout instead.
With media queries you could use Flexbox for desktop, Grid for tablet, and neither for mobile.
This question already has an answer here:
Right-align elements on multiple rows
(1 answer)
Closed 4 years ago.
I'm working on a website with HTML and want to vertical align the content of a label using FlexBox.
As long as the contents have no inside it works fine.
But when i got a content like
Right<br/>Bottom<br/>24
the content is handled as a block which is right aligned, but the individual parts of the content are not right aligned at all.
I get per example:
Right
Bottom
24
instead of
Right
Bottom
24
Here the style which i'm using for the label:
display: flex; justify-content: flex-end; align-items: flex-end;
Have i forgotten something in the style?
you should put your content inside HTML element's because flexbox is not ment to work with just text if you wanna aplly your structure on a text use css columns instead of flexbox.
Since a few years ago I see some blogs like Pinterest which display posts of different heights in columns with no horizontal alignment. I don't understand how they achieve that. Do they use Javascript? If so, do they use some jQuery plugin?
If you have two different divs, both vertical, then they shouldn't try to horizontally align themselves. For example of you made a single div that would enclose both columns, making it the proper width and height, and then nested two more divs inside of it with a width around 50%, then they would not align horizontally. Outside of that, there shouldn't be anything trying to horizontally align the elements of those divs. If this doesn't answer your question, please post the code.
This question already has answers here:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.