Dipslay issue
Hi team,
i want to center logo but i get the below error
The browser says: The display: block property prevents align-items from having an effect. Try setting display to something other than block
if you have any solution for this issue...
How can I reproduce this design (frontendmentor.io)
Hello, I'm doing a frontendmentor's challenge, and I have difficulties with the circle in the background. I have the full circle as a svg, I've tried to place it as a background-image and position it with background-position but it's not really responsive. Does anyone has an idea ?
react.js + mapbox directions api integration
how to give hardcoded start and end locations and get directions ???
How to remove this empty space on right side that comes on scrolling the page up.
I have built this UI clone of X(twitter) by using HTML, CSS and Tailwind CSS.
Here is the link to my website : https://tranquilityseeker-gautam.github.io/X-previously-Twitter_clone/
To view the site : click on details and then click on this unsafe site. I don't know why my browser is displaying my site as dangerous, I am just trying to create a UI clone of twitter homepage.
here are my html and css files : https://github.com/TranquilitySeeker-Gautam/X-previously-Twitter_clone
index.html and input. css ...
border-radius on a border-image with linear-gradient
I have a small question about css that has bothered me for some time now. Does anyone know when it would be possible to have a border-radius on a border-image that is a linear-gradient by any chance?
Repsonsive Table on Mobile - Reorder Layout
CodePen: https://codepen.io/Smgy94/pen/wvOjGyz
Happy Friday everyone!
I'm working on creating a timetable using a <table> for my page....
Better way to return a specific item from json
I just want to return the strings from the definitions.definitions objects... but the way I'm doing it feels kinda not optimized as it is about to become an O(n³). Does anyone know a better way?
Here is the link of the api to understand its structure:
https://api.dictionaryapi.dev/api/v2/entries/en/oi...
How can I make my product items responsive?
Problem:
Cause: I had created a product items list that has made an overflow and I don't know how to size it to where it'll fit within the border.
I've tried display grid and grid-template-column but it still wouldn't work, I'm still kind of new at this and I don't know how to deal with overflow as big as this....
How can I make something pop out when I hover over it?
I created a group of containers and I wanted to add some more styling to them to make them more unique I wanted to have the container kind of pop out and get closer to the screen I dont really know how to explain it
How can I make these four stack up top one another?
I'll try to explain this to the best of my ability - So I've created four empty containers and I wanted to know if is there a way to make them change so they can stack on each other in one column when the browser screen goes very small?
Nav Bar
Im a little confused as to how the nav bar should be designed semantically. I see some poeple who dont include the header tag and use nav tag instead of the header semantic tag. Then when you button like elements on your nav do they still go within the nav tag or outisde the nav but within the header if that makes sense
Section header SEO
I was wondering about SEO for this particular common section header. You'll see in the smaller font-size (span) it shows "Service Areas" and the bigger font-size (h2) it says "We've got you covered". Now I think from an aesthetic standpoint this looks better, but would google interpret this section as a service area section less than if "Service Areas" was in the h2? I know this is such a minute detail and probably doesn't affect SEO at all but I'm curious on this and others' thoughts.
Outline appearing around svg react-component when transform scaled?
The picture is what I'm seeing in my hover state for this basic <button/> element, which has an svg inside of it.
the button:
```...
Deal with img width and height
Hi everyone!
I've been using width and height attributes on img markups for quite some time now simply because I don't want to get the error in google Lighthouse and to prevent extra CLS. I think it's stupid because I will always have a fixed value for width and height (usualy the actual image dimensions) and then play around with the image in css (most of the times just doing max-width: 100% and height: auto).
How do you guys go with dealing with images width and height? I hate the fact that I'm entering width and height values just to shut up Google but that they are not actually used. I'm developing with templating languages (Shopify Liquid) so my HTML markup has to be versatile. It needs to work for different aspect ratios and not impact negatively the layout shift. In a situation where I will render an image in a section that will change layout based on the viewport, I'm not sure what I should be using as html width and height attributes....
Is it possible to have a child element's height even across cards with CSS only?
I'd like to know if it's possible, with CSS only, to have the title (blue) box match the height of the biggest title box. The red box should then fill the rest of the space and the stat cards will evenly fill the red box.
Second screenshot is the goal, but is using a fixed height on the title box.
Code Pen: https://codepen.io/Maynards/pen/NWJYvzq...
