Vertically aligning a floated element to the bottom of its container
I have the <img/> element floated right, and the text is wrapping as I want. But now the image wants to remain at the top. I want the image to always be aligned vertically to the bottom of the container (
.main_1_aboutUs)
Is there any possible way to also get the img to also align to the bottom of the container in addition to being floated?
Position absolute w/ 'bottom: 0' ruins the float, as would making the container display:flex or grid....
Website looks different in responsive mode than in real device
Hi, as a title says the website looks perfectly fine when you launch it on PC and look at the responsive mode, but on my phone there is a little gap, like 10-15px in the hero section between
<div class= 'container'> and <section class='contact__section'>. Also, when you click the hamburger menu the button with text "KONTAKT" has some padding, on the real device there's 0 padding from bottom. Why does that happen? How should I solve this and how to make websites for the future? Thanks for help.
Github: https://github.com/Jakub-Gryczka/pomoc_drogowa
live-page: https://jakub-gryczka.github.io/pomoc_drogowa/...
Scrollbar Effect!
Hello guys, I have a question searched for it and unfortunately could not find the answer!
Here i have the page scrollbar, how i can get the content behind the scrollbar (the scroll bar is transparent) as example the green thing is part of background image, i want the scrollbar to be on the background image as well as shows part of it through its transparency .
Thanks in advance!...
Masking divs to a background image of its container?
Hi everyone! I have been racking my brain trying to figure out a way to implement this. I know of masking but I am not sure at all how to even begin something like this. I tried playing around with code pens that I have found using keywords but I have had no luck trying to achieve what I am looking to do. This is just a concept idea, but I figure a visual would help.
I attached two images to this that capture exactly what I am trying to do. I wish I had code already but I have no idea. I threw this together in photoshop with the initial blue boxes representing the four child elements. The second image just shows that only the background shows for the children elements, and it is ideally fixed to that background so they aren't all taking on that background.
My thought is the child elements are transparent background, so they show the parent element's background, but the parent background only displays where those elements are in the viewport, similar to how text masking is, but for divs....
Can you provide guidance on setting up a container that uses an SVG in a different shape?
Hi ,
i was figuring this out how i can make this container with different shaped svg on left corner can anyone help me how i can do need some kind of reference or any articles which can demonstrate this kind of structure ?...
how to fix background breaking
this is my portfolio. i made a absolute background in a self closing div inside a section set to relative, and the background is banding and new lines are forming ever since . can someone help me fix this?
Where do I put the font face?
I was just trying @font-face {} with a CSS file, I was just wondering where this is usually kept at. (I mean the file with the fonts, like a .tff)
Problem positioning content with subgrid
Guys, I'm having a problem positioning the content of my first line. As you can see, I positioned the content of my cards with subgrid, basically I have a layout of 6 columns repeat(2, 2.5rem 1fr 2.5rem).
The content is positioned correctly on mobile, but when I switched to the desktop I don't know why I can't get the content in the first line to extend from column line 2 to -2. I think it's a specificity problem, some statement I made on mobile that I'm not overriding when I move to desktop. Could anyone look at my code and help me find where this problem is?
Live site: https://sircarloschaves.github.io/single-price-grid-component/
...
Align cards items in defined grid
Hey, another day is here and I have another challenge for you:
Imagine I have a grid defined, and inside that grid are cards (flexboxes) 🃏. I need to align the title, the icon, and the list of text - and the way I always have the title and the first line of the list aligned. And I don't know the height of the box, it's dynamic, based on the number of rows in the list.
Space between is probably not usable, because I can have a sheet with different number of items, and they should always be at the title....
CSS Grid question - moving children to appear in 1st row
Hi all, just a vanilla grid question, I would like to move 1st and 3rd child to render at the top (1st row) instead of rendering in the bottom (2nd row). So everything should stay the same but the top row's gap should be used by left and right child instead of spilling onto the new rows, if that makes sense?
I can't provide codepen because the code is not readable (Magento2 Hyva + Tailwind stack), the children are actually nested in separate PHTML files and grid is just wrapping over them, if that makes sense. I have applied a bunch of Tailwind breakpoint specific classes to get it to current state. I somehow believe that I'm missing a simple trick to just tell 1st and 3rd child to use the available space in 1st row above them....
