Force Grid Box to align at top
New to Discord so please forgive me if this post is not as it should be. I'm having an issue with content alignment within a grid box. The first image illustrates my desired result of a page using a grid. The Menu, Heading, and Footer are not part of the grid structure. I have 10+ pages that use this same structure. The attached text file is a mixin I use to include the grid structure.
The four parts of the grid can all be of variable height.
The problem is related to the height of the page_Table area. The area is populated with a dataTable from my database. Because the table length is greater than the height of the image everything looks fine (2nd image, i.e., table aligned to the top of the grid area). But, if one of the alpha letters is selected, which has fewer rows than the base table (3rd image) the table appears in the middle of the grid area....
Custom hr in CSS
Is it possible to achieve something like this with css ? I dont even know how to start with this.
Need help with some layout formatting... CSS.
Hello!
I have a large ellipse I am using for some layout design. It is larger than the page size and overflows off the top of the page no problem but then the bottom of the page extends to scroll down to the bottom of that image... Here is a screenshot from Figma of what I want it to do:...
Preventing Flexbox 'runts' with CSS
So on our website, we often have relatively long menus where flex-box is the ideal way to arrange a number of options. The only problem arises when the last item is all alone and it looks weird and unbalanced. We have avoided this in the past basically using 'magic numbers' as it were, but I'm working on a more general solution.
Here's my codepen: https://codepen.io/crowjake/pen/vYzzQxY
My solution is OK so far (custom properties and nth-of-type stuff), but is pretty restrictive and will require media/container queries to be made responsive, which somewhat defeats the point of flexbox....
Bubble effect in CSS
I wonder how to replicate the exact same result as in the original picture
I try inner shadow, but when I increase the blur it's spread all around the circle, meanwhile here top-left, and bottom right are clearly transparent,
also with linear-gradient is not quite the same...
