Hello, I'm working on a section of a project where I need to start grid items from one position and then move them back. I've tried various approaches, including changing the grid area، the items just pop at the other side. My next idea is to determine the grid item's original position, place it at the starting point, and then transition it back to its intended position. However, I'm unsure if this will work. It's similar to a card stack where I want to distribute each card to its position with smooth transitions.

How can I make my page look better

this is my html part:

 <div class="gridss">
            <a download="double1.jpg" href="/PO/images/galaxies/">
                <img src="/PO/images/galaxies/double1.jpg" /></a>
            <a download="galaxy1" href="/PO/images/galaxies/galaxy1.jpg">
                <img src="/PO/images/galaxies/galaxy1.jpg" /></a>
            <a download="galaxy2.jpg" href="/PO/images/galaxies/galaxy2.jpg">
                <img src="/PO/images/galaxies/galaxy2.jpg" /></a>
            <a download="m82.jpg" href="/PO/images/galaxies/m82">
                <img src="/PO/images/galaxies/m82.jpg" /></a>
            <a download="sobrero.jpg" href="/PO/images/galaxies/sobrero.jpg">
                <img src="/PO/images/galaxies/sobrero.jpg" /></a>
            <a download="whirlpool.jpg" href="/PO/images/galaxies/whirlpool.jpg">
                <img src="/PO/images/galaxies/whirlpool.jpg" /></a>
        </div>

do i call my css::

.gridss {

height: 100px;

width: 100px;

}

because when i do that, nothing is affected. so what do i replace with .gridss to make all the images/anchors be adjusted to the css? also yes, my css is well linked

Good Evening,

I'm wondering how to create a geo-specific Hero text on my page. The page in written in WordPress with Elementor.

for Instance, if someone would log in from New York it would say - Hello there in [Geo Text] (Hello there in New York]

Im a beginner in all thins and would like some direction.

Is there any better software then dreamweaver Becase for some reason that software doesn’t update when I make changes

Hi , I'm developing an Obsidian theme -which is note taking app- and implemented backdrop-filter:blur(5px) in certain areas. While it performs well on desktop, the theme feels sluggish and heavy on mobile device , Is backdrop-filter that resources intensive ?

Hi! I hope this is the right place to post this. I had an idea for my blog where I have a floatie image that says "Mail me", which when you click on it will open a small window with a contact form. However, I just can't figure out where to even start. Does anyone have any advice? So far I have the floatie image working, but how to add the intended function to it is beyond me.

I’m looking for an editor that allows me to view the HTML code together with the corresponding linked CSS for easier styling and editing. I saw it on github but couldn’t find it ever since. Reminded me of ComfyUI.

If you redo your css from scratch do you have to look at the other html pages to make sure they have the right info ?

I have a widget that will use different container breakpoints depending on a class being set.

So, to start with, something like this):

@container containerName 800 (width > 800px) {
  ...a bunch fo CSS Here...
}

That works fine. Anyone using this widget that wants it to reformat when the container gets to be 800 adds a class that defines that container name.

I'd now like to make this a bit more versatile and let users pick from another of breakpoints when using the widget. So would like something like this:

@container containerName 800 (width > 800px),
@container containerName 700 (width > 700px),
@container containerName 600 (width > 600px) {
  ...a bunch fo CSS Here...
}

But that doesn't seem to work. Is there a way to do this with different syntax?

I could, of course, just repeat the same block of CSS in 3 separate container blocks, but that's obviously repetetive and a pain to maintain.

The Pesticide Chrome extension does not work anymore. Is there an alternative? This neat little extension allowed you to see all the borders on a page.

I want to be able to create an indent in a div on hover. when i hover over the div, a small portion of the div recedes into the div or "disappears" to make room for somethign else.

I tried to recreate this idea in figma but i have no idea how. any ideas?

Hello everybody, I am a beginner and was trying to center some images in a mini project I'm working on and realized that moving things around with margin is not ideal so I checked MDN Web Docs for better alts. I concluded to the solutions you see in the screenshot. I have a gut feeling that they are not ideal either but I want to try understanding them at least.
I learned from MDN docs that place-items is a shorthand for align-items and justify-items, and that place-content is a shorthand for  align-content and justify-content. So I played around with those base properties and discovered that only align-content and justify-items works.

Why is that?

And please if you have a better way of positioning that is beginner friendly I would be grateful for the share.

https://preview.redd.it/kr0wsfbeq31e1.png?width=1366&format=png&auto=webp&s=545de2ca3f006b0ef708b98a51b984ff170018d8

UPDATE:

I still don't fully get the "why" but at lease I get the "how" now. This is what I came up with:

Notes

Demo

Is it normal to feel frustrated over css im about 2 months in from week 13 ?

I really want to learn CSS but I have no clues how. I don’t even know where to code it, or how to. I’m really eager to learn it so I could make websites, I have some basic knowledge of HTML since we had to do that for a year in grade 8. (I’m currently in grade 10). Any help?

I am attempting to locate a CSS selector for a specific HTML sample, which is referenced below. My goal is to extract only the text content of a LinkedIn post, excluding all hashtags. I have experimented with numerous CSS selector variations and utilized various automatic CSS selector generators. Despite spending 4 hours on this task, I have been unable to find a solution. I am trying to get the content of a LinkedIn post without any accompanying hashtags.

I am not sure if this is a simple or elaborate task but I assume coming up with a selector would be relatively easy for someone who is a full-on front-end developer that dabbles in CSS in their work. My background is mostly in the backend and I don't engage with much frontend work in my day-to-day workings.

For the last thirty minutes, I get headaches whenever I encounter anything resembling a CSS selector 😢. I'm prepared to work through this on my own but any guidance pointing me in the right direction would be immensely helpful in saving some time.

Here is the HTML sample: https://pastebin.com/UBJdUcAK

Here are some of the CSS selectors I've tried so far:

"div.feed-shared-update-v2__description-wrapper > div > div > span:not(a)"

"div.feed-shared-update-v2__description-wrapper > div > div > span > span span:not(.app-aware-link)"

".update-components-text a:not(.app-aware-link)"

".update-components-text.relative.update-components-update-v2__commentary a:not(.app-aware-link)"

I am in the market for ui component libraries in (mainly)tailwind css. The ones I’ve discovered (and they’re a lot - based on tailwind and others) look all the same - too much white space, gray borders and white background. They look like they’re build for touch interactions. I miss the ui designed for mouse pointers. Edit: Updated for non tailwind libraries also

I was wondering if someone who is experienced in css can dm me about issues I’ve been having with the page

Hey all, it's my first time using shape-outside property, when I use polygon or circle it works, but I couldt get it to work with url property

 float: right;
shape-outside: url(/public/hexample.png);

Thats how I try to use it