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....
Center the img perfect and get it responsive
Hi guys im running into a few problems:
My image on a wider screen doesnt fit, even if i make the height bigger it will result that its not fitting on a normal laptop screen. How can i make it fit perfecty
Also its not really responsive, the image dissapears when i make the screen smaller. I want the picuture underneath the text on mobiles etc. ...
Help centering an element in a flex container
I have a flex container with
flex-wrap: wrap. When it wraps the cta text breaks on another row, but when this happens I need it to be horizontally centered. I thought about creating a media query for when this happens and set justify-self: center to the element but that's a grid property. Any idea on how can I do that?
Need Advice About Twitter Clone
Hello, everyone! I need advice! I want to create a Twitter clone using only HTML/CSS/JavaScript. So, I found the HTML markup of the tweet section (in Twitter's UI), and there the tweet input field is implemented using div elements. But isn't the text input supposed to be a textarea? And if yes, shouldn't it be inside a form tag?
How to make <div> fit image width
Hey there, I need help with this weird problem I have(see screenshots). I am trying to justify-content with these flexbox images, but I can't because of these weird spaces between each images that end up taking all the spaces horizontally, which prevent me from justify-content. As you can see on the screenshot, I want to get rid of the red section, and make the div fit the image instead of overflowing until it touch the next images on the right. I joined my CSS code snippet, maybe it will help.
(I am quite new to web development and its my first time posting for help, so if the way I am asking my question or how I present my code snippet is not how it should be done, please guide me so next time I can ask using the good practice, thank you)...
Free-trial days left indicator
Hey, any suggestions how to achieve this? Trial period is 14-days-long, there are 5 circles to indicate at what stage of this trial period the user is. How to change their colors without changing the color of anything else? Thanks in advance.
Keep element in viewport up until a certain point
I'm currently facing a challenge i'm not so sure about how to approach and curious with what kind of solution some of you smart people over here come up with. Basically I have a page with multiple sections and one of those sections has an image with some text next to it. When I scroll down further, I want the image to follow the viewport, until the text from the next section arrives next to the image. Then, when I scroll down even further, the image should leave the viewport together with the te...
