Cascading Style Sheets

Css Flexbox

2023-01-28T07:54:59+00:00

submitted by /u/zorefcode
[link] [comments]

How do I get rid of the small excess space on the side of my web page?

2023-01-28T09:41:37+00:00

There is a small amount of space on both the top and bottom div even though I set the width to 100%. Can anyone help?

https://preview.redd.it/owhb00cl8rea1.png?width=1893&format=png&auto=webp&s=8ffae7351e5ae8612e1cc5a1a9b3fede9d2998fd

submitted by /u/legend29066
[link] [comments]

Sibling Scopes in CSS, thanks to :has()

2023-01-27T13:13:47+00:00

submitted by /u/speckz
[link] [comments]

HTML & CSS 3D Card

2023-01-27T13:15:50+00:00

submitted by /u/speckz
[link] [comments]

What is the best way to responsively position the first .navbar-item on the left side of the navbar, while the rest stays on the right side? If possible with flex-box

2023-01-27T18:41:22+00:00

<template>
<div id="wrapper">
<div class="burger-menu" v-bind:class="{ 'hidden': !showMobileMenu }" id="burger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav class="navbar">
<router-link to="/" class="navbar-Item">RELOAD</router-link>
<router-link to="/galery" class="navbar-Item">GALERIE</router-link>
<router-link to="/tickets" class="navbar-Item">TICKETS</router-link>
<template v-if="$store.state.isAuthenticated">
<router-link to="/my-account" class="navbar-Item">ACCOUNT</router-link>
</template>
<template v-else>
<router-link to="/login" class="navbar-Item">LOGIN</router-link>
<router-link to="/sign-up" class="navbar-Item">REGISTRIERUNG</router-link>
</template>
<router-link to="/contact" class="navbar-Item">KONTAKT</router-link>
</nav>

<section class="section">
<router-view/>
</section>
<footer>
<p class="has-text-centered">© 2022 Julius Buller</p>
</footer>
</div>
</template>

submitted by /u/F-L-A-C-K-O
[link] [comments]

Learn How to Build Chrome Extensions with CSS, HTML, and JavaScript

2023-01-27T14:19:40+00:00

submitted by /u/aremu_smog
[link] [comments]

How to? Using ::before and ::after

2023-01-27T11:53:55+00:00

I used ::before and ::after to add a special character to a header and the left is what i got. I want to make it like it is on the right, where the character is in the mid point of the header.

submitted by /u/YaBoiToaster
[link] [comments]

Is there a way to make all cards same size according to the heighest one ?

2023-01-27T01:30:58+00:00

submitted by /u/France_linux_css
[link] [comments]

Why does my navbar shows under the box container? how do I fix this

2023-01-27T16:05:23+00:00

submitted by /u/Ok_Cobbler3360
[link] [comments]

I absolutely love the mobile drop-down menu. How do I code it?

2023-01-27T14:48:05+00:00

Hello HTML pros:

I love the drop-down menu on www.hyasforchoice.com when viewed on my mobile device. Does anyone know how to code this?

Thanks!

submitted by /u/used_npkin
[link] [comments]

How would you create an offset stroke effect with transparency to background such as this?

2023-01-27T05:41:27+00:00

submitted by /u/dooblr
[link] [comments]

MDN vs caniuse (Which is more trustworthy for checking browser compatibility data)

2023-01-26T14:09:43+00:00

submitted by /u/parthmty
[link] [comments]

Struggling with grid / flexbox

2023-01-27T00:38:11+00:00

I understand grid and flexbox - I think. The problem is that I don't understand them in conjunction with ads on the side. Ad boxes need to be the same height as the rest of the content on the left if say you have an article on the left. How does that work? No YouTubes explaining it. No articles explaining it. Any help?

submitted by /u/tempo90909
[link] [comments]

Question/Discussion: Do you still worry about pixel density in 2023?

2023-01-27T00:49:21+00:00

Years ago, when smaller displays started sporting higher resolutions (eg Retina), there was a lot of community discussion about how it would affect responsive web design. The distance between CSS pixels and physical pixels was becoming larger and more varied. Type could look very different on monitors that only differed by a couple inches. A lot of that discussion boiled down to three lines of thought:

1) Use absolute units on the root and relative units elsewhere. There are some downsides, like having to clamp everything that could possibly get too big or small.

2) Use media queries for resolution and pixel density to fix things. This can quickly get messy, confusing, and repetitive. Doubly so if you're targeting a broad range of densities.

3) Ignore the problem until OS and browser providers could create a better solution through scaling. This was the solution most appealing to me, for obvious reasons.

So, what is the state of the art? Have OS and browser providers come up with an effective solution? Do you folks ever change your OS scaling while working on a project? Does anyone still query pixel density?

To be transparent, I'm asking because I volunteered to make a site for someone. My go-to solution is #1, but I haven't made a site in a long time. I've noticed a lot less discussion on the topic in the past couple years. That makes me suspect that something has changed. TIA.

submitted by /u/Asleep-Kiwi-1552
[link] [comments]

Looking to hire CSS help on some small Angular sites.

2023-01-26T18:01:43+00:00

Hello! I am a web developer trying to build out some small websites and start doing more freelancing. I build all my sites out in Angular and use Docker to run them. As long as you have docker installed, you can run the Angular apps locally.

I am struggling with some CSS styling around two areas, masking and placing images on top of other elements (but also responsive). I was hoping to hire someone who is an expert at CSS and pay them accordingly. If you're interested, I could send you more details via DM. Here is an example of one of the CSS fixes I would need.

Add a green shadow/backdrop to the masked image here.

Thanks in advance!

EDIT: Thanks everyone for the help! I had an awesome developer reach out who helped me on one of the issues I was having. Thanks for the comments to fix the other.

Cheers everyone!

https://preview.redd.it/fo6akqqwffea1.png?width=5272&format=png&auto=webp&s=4a3d8a2c515c24c97bfa412bec7a6f0ef241c825

submitted by /u/havocshack
[link] [comments]

Can someone give me ideas on how to make this apply page much more appealing?

2023-01-26T18:37:58+00:00

https://preview.redd.it/psc41itlmfea1.png?width=1805&format=png&auto=webp&s=f5ebccad297d8f9c5608b7adf1745d5ba37f7c8c

https://preview.redd.it/1r14yc2nmfea1.png?width=1061&format=png&auto=webp&s=24ca6bc86704eb80d6a677d9d0e3312e6c27fbef

submitted by /u/legend29066
[link] [comments]

I spent way too much time on this hamburger for my portfolio

2023-01-25T18:42:21+00:00

submitted by /u/dmattox10
[link] [comments]

css background problem

2023-01-26T10:12:28+00:00

Hello, I created a simple file to illustrate my question better.
Github: https://github.com/HRDTS/cssTesting
Preview: https://htmlpreview.github.io/?https://github.com/HRDTS/cssTesting/blob/main/index.html

My question: I want the width of the image to be 100vw and the height to be whatever the image file is. So there should be a scroll bar so the user can scroll down. The width needs to stay 100vw.

Another question: there is a green square (div) on the image. I want to set this div to a certain position and make it stay there. So when the user zooms in or out, it should stay where it is. The green square currently moves. I need to set this square to a fixed position so I can complete my 'where is waldo' app.

Been struggling with this for a little too long now, so any help is much appreciated. Thx!

submitted by /u/madmanmax58
[link] [comments]

Underline to box animation

2023-01-26T10:04:39+00:00

How do you code a hover effect for a text with underline? The underline will animate to be a box.

I know border is one way to do it but I want animation of the line forming a box using pseudo elements, just don't know how to do it. Underline is pretty common to find but I can't find the underline to box

submitted by /u/Cheap-Regret-1244
[link] [comments]

flexbox seems to be broken, works for all items except one(see comment for code)

2023-01-26T13:43:07+00:00

1) the first element doesnt align with baseline property

2) a better view, can see it crosses the provided div height.

submitted by /u/Chathen
[link] [comments]

Problem with banner

2023-01-26T04:19:32+00:00

Hello, I have a problem with a banner that I want to place on the home page, I want to place 4 images horizontally that occupy the entire width of the screen (on mobile they are one below the other) but I have the problem that when I want to place them on larger size one goes down (as seen in the picture)

How could I make all four of them line up and use the full width of the screen using 50% of the screen height? this is the css i am currently using

.child{

float: left;

width: 40%;

padding: px;

box-sizing: border-box;

}

.child img{

width: 100%;

}

</div>

</div>

</div>

</div>

Thank you very much, I will be attentive to any comment

https://preview.redd.it/j4lfuagmdbea1.png?width=754&format=png&auto=webp&s=bfd7bdf4eecf8201a7c4dfc08fd3369cb70c089c

submitted by /u/Izaak85
[link] [comments]

Where i can find free figma templates or designs to sharpen my css skills ?

2023-01-25T19:11:17+00:00

submitted by /u/No_Car5573
[link] [comments]

Is `display: inline-block` shorthand for outer display type of `inline` and inner display type of `block`? Or is it just a `inline`-`block` hybrid?

2023-01-26T00:07:44+00:00

Is display: inline-block shorthand for outer display type of inline and inner display type of block? Or is it just a inline-block hybrid?

MDN CSS > The Box Model > Using display: inline-block?

This ref has an example of two-value display value, display: inline flex, which means inline outer display and flex inner display. Or equivalently, one can use a single value display: inline-flex.

submitted by /u/joseville1001
[link] [comments]

CSS ellipsis (the 3 dots) on multiple lines - Js Craft

2023-01-25T12:17:20+00:00

submitted by /u/jscraft
[link] [comments]

How would you apply an offset stroke to text such as this?

2023-01-26T00:08:33+00:00

submitted by /u/dooblr
[link] [comments]