I got some cards that should show a trailer of a website taking the title and a excerpt from that given website. The bottom grey background is a parent div with display: flex on it. I've set the container to height: 200px and the child elements should fit inside.
Because the title and text can vary from site to site i would like to make them fit as best as possible with just one CSS class.
So, when a title is shorter and only takes up one line, I would like to add one line to the excerpt field.
Is there any way to make that happen with CSS? can display: flex handle this? I've tried to use flex-grow but it doesn't work
Related
I have a CSS grid with a scrollable element placed in one of the grid's areas.
What'd I'd like is for the item to shrink if the content is too small to fit the area. I did this by setting align-self to start.
This works great, until the content grows. The element resizes past the end of the grid area it's assigned to.
How can I use align-start but still cap the height to the height of the grid area? I would have expected this to be the default behavior.
One solution is to have the element stretch but then have a child element inside it that contains the actual content. The parent would have overflow: auto and the child would simply grow until it's too large for the container. Unfortunately, this kills the box-shadow.
I could put the box-shadow on the outer element in this case, but then it'll be too large when the content is small.
Any ideas what I can do here? I considered using some Javascript shinnanigans but I'm not even sure how I'd grab the height of the grid area from JS.
JSFiddle: https://jsfiddle.net/1kLenm5a/2/
Apparently max-height: 100% works. I could have sworn I tried that but I was messing with so many other settings at the same time I must have missed it.
Thanks.
I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport.
The image is supposed to shrink and expand to stay between the two side columns, which it does because of
a percentage width css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.
For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image.
I thought I was on to something with object-fit: contain but alas, it appears width will always prioritize itself over object-fit.
Any help would be much appreciated, as I'm quite new to web dev.
Here is a link to a client-side view of what I have so far:
https://jsfiddle.net/ydumcrnk/
Have you looked into display: flex? You can wrap a div around the three .column classes, give that container div a property of display:flex and then you can add some subsequent properties that will line up the .column classes the way you want.
Here is a page on the subject I reference often.
Difficult to come up with a good title - by all means, change if you can.
Traditionally, a margin on an element can be used to move elements around a page relative to its previous elements. So, if I had a div as a column on my page I could shift elements vertically within that by setting their top-margin CSS property.
This is handy in dynamic pages where some elements might not exist according to given condition, eg, a very simple example here:
https://jsfiddle.net/jhartnoll/4s6pcLu0/1/
I have simply defined a column with a div element, positioned two other div elements and made one of them have a 2em vertical gap between it and its predecessor.
If you remove (or set Display:none) element #one then element #two is shifted up the column and positioned 2em from the top of the column, rather than 2em from element #one which is no longer there.
However, if I try to do a similar thing using a CSS grid, thus making the DOM tree simpler and more flexible, I run into a problem:
https://jsfiddle.net/jhartnoll/xvhycg0k/11/
In this case, the columns are set by the CSS grid so are sort of pseudo columns, but when I set my elements to have margin-top: 2em the margin is calculated from the top of the grid column, not relative to a predecessor element.
Therefore, if element #one is not present, #two simply remains 2em down from the top leaving a gap above...
This behaviour renders margin-top useless, because it is exactly interchangeable with top on relative positioned elements.
Is this a bug with CSS Grid, or am I using it wrong, or is there a way around this?
CSS Grid seems great, but I have run into several problems like this where dynamic content is concerned, if elements have potentially variable heights, or may not be there at all, the Grid leaves other elements floating in space, unable to shift up.
EDIT for clarity of the dynamic problem
Thanks for the comments so far. The problem is not with using the layout, I understand how to set up grids, and rows, define sizes, spaces, span etc, the problem is with dynamic content.
Supposing I have an extremely simple product page:
https://jsfiddle.net/jhartnoll/xvhycg0k/42/
Irrespective of the grid spacing, row/column size etc, the concept is simply that I have thrown in a "Price reduced by 10%" splash element above the product title.
Naturally, product pages would be using templates and therefore the HTML and CSS should be fixed and flexible enough to enable elements to be missing or present.
Not all product pages will display the 10% off deal, so on those pages, I would want the Product Title to shift up into the top element position.
This, as far as I can tell, cannot be achieved with grids.
Similarly, if there was a div which contained a product description and underneath it some product cross promotion or something, the description might be of variable length, so with the div as a column example in the my original question, the content would automatically expand the description grid and shift the cross promotion stuff down the page. Again, this can't be achieved with grids?
So, I was messing around with using a grid defining columns only and simply one row per page so that content could be stacked in columns similarly to the original div as a column example, but then I ran into this margin-top problem which, within a Grid is that margin-top is relative to the grid top, not to the elements above.
So I can't find a way of creating a dynamic website, using a template design which allows for conditional elements and variable element dimensions using Grid and without using Javascript to manipulate on page load.
In my mind, there should be an option for a row-shift property to allow elements to jump down a row if the content is too large, or jump up if there is nothing obstructing it... or something like that anyway!
Hey try the following code I guess it will help your requirement!
#column{display:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;}
#one{background:red;width:2em ; height:2em}
#two{background:blue;width:2em ; height:2em}
<div>
<div id="column">
<div id="one">
</div>
<div id="two">
</div>
</div>
</div>
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I have a list of div with each div having a image inside.
The width of the images is not known before loading the page.
I have a container div with width 960px. How can i arrange the images in rows with each row having as much images as the row width permits? So for example if i have 4 images (300px, 400px, 200px, 250px) i would need to have first 3 of them on a row and the 4-th one on second row as having all 4 of them in a single row will get a width larger then 960. And on each row the images should be centered.
I've tried all i could think of using css, and did not found a way that works.
Any ideea?
Something like THIS?
Ok, I worked with simply divs, because I didn't want to search for images but the main pont is: the elements which need to be both aligned and fitted, make them inline-block. Inline to be made multiline, box to be able to set both width and height. After that, you only need to set on the parent: text-align: center
EDIT
Oups, I've put spaces between the divs (like real space characters) and they appear as spaces between the divs, since they are inline. make sure not tu put any whitespace between the containers, like THIS
If you lose the containers, you don't even need to use inline-block.
http://jsfiddle.net/bryandowning/ghcmM/
However, since this is a list of images, you probably should use inline-block on the li elements of an unordered list.