Consistent distances between two elements in a grid
*Sorry for the new thread, I couldn't add new images to the old OP.
------------
So I'm trying to make one element in a grid start a consistent distance from another. For example in the images with the snowboarder I'd like the blue background to cut through the image about halfway up (image 1)...
Is there a way to have bg-clip-text not cut off letters (eg: 'g') prematurely?
The
g gets cut off prematurely. Adding a line-height of >= 1.2em fixes it, but makes the gaps between "Software" and "Engineer" incredibly huge and ugly on smaller devices. I'd love for it to be consistent.
```html
<div className="p-10 flex flex-col gap-4">
<div className="text-5xl font-bold">...
Help on SASS regarding responsive nav bar
Hello all, I just started learning from zero knowledge two weeks ago and currently tackling sass.
I have a mockup and I am working towards but can't seem to get the nav items to space evenly within their "column" like the mock up as well as the longer border-bottom when the link is active (only to the width of the text)
I've fiddled with flex box, alignment and justify content, nothing seems to make it budge.Been stuck on this for the past 6 hours and seriously questioning if I am just really stupid......
Get Stuck with Arrow Hover Button
If the users click the entertainment features in the navigation bar it will take them to entertainment places i already did a flexbox cards but i don't know how to arrow hover button to hover all 6 flexbox cards in one row . I have attached the wireframe as well, you may refer to it.
How to make this grid layout without using display grid 2 times?
Is it possible to make this layout (1 full width row and 2 columns below) without using display grid 2 times like I did?
Merged cells in table
I am creating this table layout with merged cells. The html I have written is a bit awkward. Please let me know if this is good or is there a better solution.
```html
<table border="1">
<thead>
<tr>...
CSS Grid Makes White Space Because Of The Height Of Some Columns
The question is how do I just slot in the 2 rows beneath the picture into that white space, so that I get it like in the second picture
After setting proxy in vite.config.js '/api/3' making call on 5173 port instead of 5000
Description:
please note this is the first time I'm using proxy so i may not be aware of certain terminology or i might have made mistake.
I've set up the proxy in vite.config.js code screenshot shown in first image
port of frontend vite + react is 5173
port of backend node + express is 5000 (using cors)...
Seeking Guidance on Button Design: Photo and CodePen Link Provided
I have a question regarding the button I've shared a photo of. Could you please let me know how it looks? Additionally, I'm sharing the codepen link to show how I've approached creating this button. Can you guide me if there's an easier way to achieve the design shown in the photo?
https://codepen.io/Amit-Soni-the-vuer/pen/VwNeWbj...
Need help with this HTML&CCS Challenge
My first problem that I'm stuck on is the <picture> element in html I'm not quite sure if I'm using it properly. My second problem is when I go from mobile to desktop my header and text seem to still be aligned centered and still have the max ch unit from mobile. I've tried fixing it but Im not quite sure how to get rid of it
How to make this dynamic UI
Hello everyone. I have no idea to implement it. Requirement is the items which will disappear and show its hidden total when screen is increasingly narrower
Ex: A,B,C,D -screen narrow-> A,B,C +1 -screen narrower-> A,B +2
Thank you everyone...
