I'm referring to the new post flairs that use template ID's instead of CSS classes. Is there a different way to target them?

I want to make a arch that fits around my content without touching my hero section text. I've got the code working to a extent but it's not great.

I am using a website placeholder but my real website will be structured the same with similar content. I've tried a couple of different strategy's but none of them work as I want them to. I attempted to use a pseudo body element but I couldn't get it working.

I also want to have the arch cover the whole website (in width) when on a mobile screen, I was thinking of using a clamp (or aspect ratio?) but I still don't know best practices around this.

Codepen: https://codepen.io/yos-dez-coder/pen/JjaLNqG (I'm using a white inverse of the arch so that I can change the background colour easily also it's a svg file in the non Codepen version of the website)

Check out this animation video which explains the float property.

https://youtu.be/bGINZ4QXYg4

ISSUE SOLVED: This line worked: text-shadow: {textShadowColor} {textShadowInfo}

Original post:

Hi!
When I have ONE field input for textShadow, "rgb(255, 255, 255) 1px 1px 1px" -> this works!

But now I want to divide it into two input fields: the color, with a color-picker and the other shadow data.

Like this:

text-shadow:{{textShadowColor} + " " + {textShadowInfo}};
But then it no longer works, and it's not displaying a shadow.

Any ideas of why this isn't working?

This video teaches about how to code a fixed navigation in a website using css and html. Fixed navigation is convenient as it saves the user time not to scroll up again when they want to access the navigation. It also enables companies to keep their branding in their users sight throughout the viewing process. It also provides a quick and easy flow through a website.

https://youtu.be/Jb0c6YqfUr0

I have a flex container with direction column.

I want each item in this flex column to have width of 80%.

one of the items is supposed to be a div with background-image. So I want the image to take all the width, dynamically as the resolution changes and also keep aspect ratio.

The problem is that when I only set width of the background to 100% (100% of the 80%), the height is 0 because it's not set. But how can I set the height if it's dynamic and should match the resolution?

.image_flex_item {
  background-image: url('/my_image.png');
  width: 100%
  background-repeat: no-repeat;
}

I've found that using Better Discord you can get beautiful themes to replace that grayish background we are used to. But it seems as these themes are all made up by CSS scripts that include image URL's. Hence I can't but wonder if you smart guys would know how to make the script show your own images instead of the theme's original one?

Here is a link to a library with these themes. You can easily install one of them by simply installing the program Better Discord and choose one of the themes in the library to replace the standard grey tone.

Assuming I have a <img> that I want to use as a card with text on it.

Then I want to put some text in different positions on it, for example: https://imgur.com/a/4CTYGxE

How do I make this card "fixed", as if the text is part of the image?

Currently I position my text in absolute position to the card, but the text itself changes size and it doesn't look like it's really part of the card because it keep moving on different resolutions

What is the proper way to make the text "part" of the card? Should I use % as the font-size? percentage from the parent card <img> width for example?

​

EDIT: Example of what I mean, where the image size changes but the text not because the units aren't corresponding:

https://jsfiddle.net/yo1z4682/

Thanks!

In this YouTube video, you will explore the difference between two commonly used CSS properties: visibility:hidden and display:none. As a web developer, it's essential to understand the difference between these two properties and when to use them appropriately.

https://youtu.be/JzgbsXyh4ok

Hi all,

I'm a newbie to CSS and I've been looking at tutorials for setting responsive padding.

I've got a block of text, next to an image.

- I'd like the text to have equal padding above and below the text

- I'd like the padding to be responsive

​

I've watched a few different tutorials on min, max, camp

this video which is a bit more complex - https://www.youtube.com/watch?v=N7zPL8i_DTs

But just looked on w3schools and in an example, they just use a percentage?

​

​

- would "padding-block: %" - be the easiest solution?

​

like this - https://codepen.io/drew-campbell-griffiths/pen/qBMxvxP

​

Thank you

Hello,

Is it possible to achieve the following without JavaScript:

https://imgur.com/a/qwQOQye

Where the currency icon is at the middle (but it moves if the digits number increase)

So the user puts the number but the icon is always there near the number

Watch Now: https://youtu.be/JdHyMwM8W-I

So I have tried several different things to create a vertical Pagination for my site for example on my user list I want it to display 1. 2. 3. To the left of the content Instead of the normal

Under the content I completely restarted this but I have tried several different things I can’t get it to work

I’m using pho 8 and a pdo wrapper not sure if this helps.

I have the following table inside grid:

https://jsfiddle.net/8pnrw5o2/

and now the max-height is not working anymore.

I want the table to be scrollable after certain height

Why is it not working in this case?

thanks

https://techiebundle.com/dropdown-menu-bar-on-hover-using-pure-html-and-css/

Hi,I'm not a front-end developer, but I'm trying to clean my project a bit. At this point it is a mix of Bootstrap and own variables (class / id / tags).

Is there any VSCode extension or any workaround to see clearly from where each variable is defined ?

My goal is to simply suggest better naming variables which seem very poor at the moment.

Thanks a lot for your consideration :)

Edit: Differentiate variables ofc in HTML/templates.

<script>

    let inputTags = document.getElementsByTagName("input");

    let validate = (event) => {

      console.log(event);

      let element = document.getElementById(event.target.id);

      element.style.border = "1px solid #ff0000 !important";

    };

    for (let i = 0; i < inputTags.length; i++) {

      inputTags[i].addEventListener("blur", validate);

    }

  </script>

I made this script by researching the internet .But it doesn't work. What is wrong here ?

Hi. Title says it all. I would like to do what r/askhistorians does, and I'm confused about how they did it.

1. Is t done with CSS? If so, how, since you can't edit New Reddit with CSS.
2. Those are submenu tabs, right? Those tabs have wiki pages under them so the wiki is active but no Wiki tab is visible. Did the mods create the pages under a visible Wiki tab, to keep track of them, then create links to them from the submenu tabs, and then just hide the Wiki tab?
3. How did they make the Wiki tab invisible without disabling the wiki?

I've used CSS to format ebooks with Calibre for my Kindle, but I'm probably a rank beginner. However, I'm willing to work to learn, if I have to.

I hope I don't sound rude. I'm trying to be brief; I assume you're busy people. Thanks so much for your time!

I have the following flex layout that divides the page into 2 sections of 1/3 and 2/3 of the page (33% and 66%):

https://jsfiddle.net/gyh2Lwmf/

​

But if you drag the window of the page smaller you can see that after a certain point the two flex items stack on top of each other and take the full width.

This part happens because of the row wrap and the flex-grow: 1

But why it gets there in the first place? There is enough space for the 33% and 66% no?

Although I was told that it's happening because it's 33% and 66% then there is 1% left for the border which doesn't have enough space after a certain point. But still I couldn't understand why?

Hi all,

Just a disclaimer, I'm a CSS beginner.. I'm building a website on Cargo and trying to figure out how to change the position of the Nav bar. More specifically sending it to the back. As of now, when you scroll down the images go UNDERNEATH the Nav bar on the left. What I want is to have the images go OVER the Nav bar and it still be operational even if I click on it half covered.

Thanks!

Nick

Hello,

I made a page on 1920x1080 screen. The page should only work on desktop screens (so 16:9 or 4:3) and relatively large, with common screen dimensions: 1920x1080, 1366x768, 2560x1440 etc..

On my 1920x1080 the page looks good, but things get a bit bizzare when I check with devtools on "responsive" and drag to the other desired resolutions (1366x768 for example).

How do I design things to make them look pretty much the same as I change resolution with the devtools?

This is a general layout of the page I made: https://imgur.com/a/MyIBKZW

I've used a mix of % and vh/vw as units but still, when I resize the screen size, things just don't seem to stay together well.

How am I supposed to start designing in a way that at least for these common desktop sizes, the design would remain as it is?

I used mix of Bootstrap with flexbox (not grid) and vanilla CSS.

Is it possible to create the design in a way that it would at least stay together for desktop sizes?

.context > div gets cut off at the top and I'm not sure how to fix it.

See here: https://codepen.io/dominick/pen/PodOdbb

Any help is appreciated!

I copied html and css code and I understand everything except that i have in css class name( lets say car) and in css its .car p. The p is probbabky paragraph but im not sure. If anyone can help i can also send screenshot of the code.

image1

image2

I created a container-div inside the main div. The container-div can be moved. It goes ouside in stating& ending. How to prevent it ? (I want to set this like youtube thumbnail preview)

.main-container{width: 98%;user-select: none;overflow: hidden;max-width: 900px;border-radius: 5px;background: #000;  aspect-ratio: 16 / 9;position: relative;}

.container-div {height: 150px;width: 203px;background-color: antiquewhite;top: -190px;left: 40%;position: absolute;z-index: 1 !important;}

Hello,

I need to export a background image from Figma and position it to the right of the page.

It needs to sretch the entire height and it's about 30% width. It also has some icons inside it at the top of it.

I have a few questions because I got confused for something that is seemingly simple:

1. Should I export it as SVG or PNG? (I noticed the SVG version weighs much less)
2. After I download it, it has fixed dimensions, but I need it to stretch the entire height. But I also don't want to distort the icons inside the image (It's mostly a single color besides the icons inside so I want this color to stretch all the height), so I assume using something like height: 100% much distort it?
3. Should I have this image inside a <div> and use the css selector on this <div>, or use background-image directly on the body?

Thanks

I have seen quite a few ways of getting CSS to work with SVGs, and some of them have really made my brain hurt and made me want to quit my job. Others have been okay. I'm trying to get a little advice on the best ways to create SVGs and work with them in CSS.
I have seen SVGs use `fill="currentColor"` so that you can apply CSS as simply as `color: #303030`. There seems to be less control over placement and size, or at least it requires tricks I don't know.
Another method I've seen is to make the SVGs black so that a filter can be applied via css classes.
There are like 5-10 different ways I've seen.
So, is there a way that makes editing via css to change colors and size/position a bit easier? How do my SVGs need to be set up, and what's the easiest way to work with that in CSS?

Hello y'all, I have been working on my navigation for my webpage and it is not going horizontal and is causing a lot of problems.

CSS:

* {
    box-sizing: border-box;
    display: grid;
}
head title {display: none;}

.grid-container {

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 9fr 0.5fr 0.5fr 9fr 0.5fr 0.4fr 3fr 0.5fr 0.5fr 9fr 0.5fr 0.4fr 3fr 0.5fr 0.5fr 9fr 0.5fr 0.4fr 3fr 100px;
    grid-gap: 0;
    padding: 10px;
    grid-auto-flow: row;
    grid-template-areas:
      "t t t t t n n n n n n n"
      "l l l l l l l l l l l l"
      "e1 e1 e1 e1 e1 e1 e1 e1 e1 e1 e1 e1"
      "e2 e2 e2 e2 e2 ig ig ig ig ig e4 e4"
      "g g g g g ig ig ig ig ig e4 e4"
      "e3 e3 e3 e3 e3 ig ig ig ig ig e4 e4"
      "e5 e5 e5 e5 e5 e5 e5 e5 e5 e5 e5 e5"
      "w1 w1 w1 w1 w1 w1 w1 w1 w1 w1 w1 w1"
      "e6 e6 e6 e6 e6 e6 e6 e6 e6 e6 e6 e6"
      "e7 e7 ai ai ai ai ai e8 e8 e8 e8 e8"
      "e7 e7 ai ai ai ai ai a a a a a"
      "e7 e7 ai ai ai ai ai e9 e9 e9 e9 e9 "
      "e10 e10 e10 e10 e10 e10 e10 e10 e10 e10 e10 e10"
      "w2 w2 w2 w2 w2 w2 w2 w2 w2 w2 w2 w2"
      "e11 e11 e11 e11 e11 e11 e11 e11 e11 e11 e11 e11"
      "e12 e12 e12 e12 e12 si si si si si e14 e14"
      "s s s s s si si si si si e14 e14"
      "e13 e13 e13 e13 e13 si si si si si e14 e14"
      "e15 e15 e15 e15 e15 e15 e15 e15 e15 e15 e15 e15"
      "w3 w3 w3 w3 w3 w3 w3 w3 w3 w3 w3 w3"
      "f f f f f f f f f f f f";
  }

  html, body , .grid-container {
    height: 100%;
    margin: 0;
  }

  .grid-container * {
    position: relative;
  }

@font-face {
    font-family: "DM sans";
    src: url(https://fonts.googleapis.com/css2?family=DM+Sans&display=swap);
}

    /*  l ----> logo layer #1
        e ----> gray blank space
        w ----> white blank space
        g ----> gallery background
        ig --->  gallery background
        s ----> shop
        si ---> shop image
        a ----> about section
        ai ---> about image
        f ----> footer
    */
/* -------navigation-------- */
.navtext {
    grid-area:t;
    font-family:"DM sans", sans-serif;
    color: white;
    text-align: center;
    padding-right: 20px;
    padding-top: 100px;
    background-color: #e8c2bc;

}
nav {
    grid-area: n;
    background-color: #e8c2bc;
    color: white;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    list-style-type: none;
}
nav ul li {
    font-family: "DM sans",sans-serif;
    width: 100%;
}

nav a {
    color: #ffffff;
    padding: 1rem 0.5rem;
    text-decoration: none;
    text-align: center;
    display:block

}
nav a:hover{
    background-color: #FFFFFF;
    color: #e8c2bc;
}

/*---------- about ---------*/
.about {

    grid-area: a;
    background-color: rgb(0, 255, 81);
}

.aboutimage {
    grid-area: ai;
    background-color: rgb(255, 0, 191);
}

/*---------- shop ---------*/
.shopimage {

    grid-area: si;
    background-color: rgb(0, 255, 255);
}
.shop {

    grid-area: s;
    background-color: rgb(137, 43, 226);
}
/*--------- gallary ---------*/
.gallaryimage {
grid-area: ig;
background-color: chartreuse
}
.gallary {
    grid-area: g;
    background-color: darkorange;
}
/*---------- other layout grid --------*/
.logoarea {

    grid-area: l;
    background-color: rgb(255, 171, 3);
}
.greyspace1 {
    grid-area: e1;
    background-color: lightgrey;
}
.greyspace2 {
    grid-area: e2;
    background-color: lightgrey;
}
.greyspace3 {
    grid-area: e3;
    background-color: lightgrey;
}
.greyspace4 {
    grid-area: e4;
    background-color: lightgrey;
}
.greyspace5 {
    grid-area: e5;
    background-color: lightgrey;
}
.greyspace6 {
    grid-area: e6;
    background-color: lightgrey;
}
.greyspace7 {
    grid-area: e7;
    background-color: lightgrey;
}
.greyspace8 {
    grid-area: e8;
    background-color: lightgrey;
}
.greyspace9 {
    grid-area: e9;
    background-color: lightgrey;
}
.greyspace10 {
    grid-area: e10;
    background-color: lightgrey;
}
.greyspace11 {
    grid-area: e11;
    background-color: lightgrey;
}
.greyspace12 {
    grid-area: e12;
    background-color: lightgrey;
}
.greyspace13 {
    grid-area: e13;
    background-color: lightgrey;
}
.greyspace14 {
    grid-area: e14;
    background-color: lightgrey;
}
.greyspace15 {
    grid-area: e15;
    background-color: lightgrey;
}
.whitespace1 {
    grid-area: w1;
    background-color: white;
}
.whitespace2 {
    grid-area: w2;
    background-color: white;
}
.whitespace3 {
    grid-area: w3;
    background-color: white;
}
footer {
    background-color: rgb(255, 0, 157);
    grid-area: f;
}

html:

<!DOCTYPE html>
<html lang="en">
  <head>
	  <meta charset="utf-8">
	  <title>gg design</title>
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>

    <div class="grid-container">
		<header>
			<h1>GG Design</h1>
			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="shop.html">Shop</a></li>
				</ul>
			</nav>
		</header>
		<main>
			<div class="logoarea">
				<img src="./ggimages/logo_branding_Page_1.PNG" alt="gg design's logo"
					 style="width: 355px; height: 233px; ">
			</div>
		</main>
		<div class="logoarea">
			<img src="./ggimages/logo_branding_Page_1.PNG" alt="gg design's logo">
		</div>
		<div class="greyspace1">blankspace</div>
		<div class="greyspace2">blankspace</div>
		<div class="greyspace3">blankspace</div>
		<div class="greyspace4">blankspace</div>
		<div class="greyspace5">blankspace</div>
		<div class="greyspace6">blankspace</div>
		<div class="greyspace7">blankspace</div>
		<div class="greyspace8">blankspace</div>
		<div class="greyspace9">blankspace</div>
		<div class="greyspace10">blankspace</div>
		<div class="greyspace11">blankspace</div>
		<div class="greyspace12">blankspace</div>
		<div class="greyspace13">blankspace</div>
		<div class="greyspace14">blankspace</div>
		<div class="greyspace15">blankspace</div>
		<div class="gallary">gallary</div>
		<div class="gallaryimage">gallary image</div>
		<div class="whitespace1">whitespace</div>
		<div class="whitespace2">whitespace</div>
		<div class="whitespace3">whitespace</div>
		<div class="shop">shop</div>
		<div class="shopimage">shop image</div>
		<div class="about">about</div>
		<div class="aboutimage">about image</div>
		<footer>footer</footer>
	</div>
  </body>
</html>

any help is greatly appreciated

How do I achieve this kind of circle on a website? Is there a generator or can it be done through CSS alone? Please help:

https://imgur.com/a/hlqXFKM

Im trying to lock the window at a certain width. First I’d make the window full screen and then drag the window’s side to the right til it locks to a certain width. I hope I make sense but if someone can help me how to do this I’m css.

Im currently doing a project on freecodingcamp so as of right now I know only html and css.

If this needs more explanation or even images, lmk!

Thank you

I have this website https://theawesometeg219.neocities.org/, and I want to make the scrollbar in the style of windows 98. can anybody tell me how to? I'm not really good in CSS.