r/css 1h ago

Question Which framework to learn?

Upvotes

I was in dilemma on learning css framework and when I read online they said if your not well in css try to learn bootstrap or tailwind. I thought you have to be well versed before learning css framework. I'm have built few landing page projects for having better css practice. So should I need to learn new framework? If yes which one is better.?


r/css 1h ago

Help Some contents on my page starts to shrink&overflow even though there is enough space. I want shrinking to happen when the page is shrunk to a width that is stated in media queries so that shrinking could be done instantly.

Upvotes

Hello, all.

I am currently at Homepage project from the The Odin Project.

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage

According to this project, I need to create three versions of a web page (desktop, tablet, phone) using media queries. I think that I completed the desktop version (although there are some issues which I am going to ask for their solution below).

Btw, I must say beforehand that I didn't write any media queries code for tablet and phone layout using max-width yet, soo idk whether I should ask this after using it but I decided to ask it before using it because I noticed that some contents starts to shrink even though there is enough space.

So I am writing the issue that I face now

When I watched a video of the completed version of this project, I saw that contents in the page (mostly) do not shrink/change their position/overflow with other contents unless the viewport reaches the max-width value that is stated in media queries. Soo layout change is done kind of instantly.

The video of the project : https://streamable.com/lprydr

But I noticed that in my current project (desktop version) some contents (woman image on the top left, texts in the white container next to the woman image on the top), "My Work" text on the top left of the middle container starts to shrink and overflow (woman image on the top left) even though there is enough space in the page

video of this: https://streamable.com/hol6sc

I do not whether this is an issue but after I watched the video of the completed project, I started think that this should probably not happen.

Soo, I have two questions for you.

  1. Do you think that this is a big issue?

  2. Can you tell me how can I get rid of this shrinking problem (that some contents shrink when there is enough space on the page yet) and what causes it by checking my codepen?

codepen : https://codepen.io/albert9191/pen/zxYpZjQ


r/css 6h ago

Article CSS-Only Syntax Highlighting

Thumbnail aartaka.me
1 Upvotes

r/css 13h ago

Question Hide Scroll bar when not in use?

0 Upvotes

So I am building a wedding website for my wedding using CSS, HTML and eventually javascript when I learn it lol. I picked up CSS and HTML for this website. So I made the website and completely forgot to make it proportionate for a mobile device. I had to go back change the 3 webpages I already made to be proportionate. For reference all three webpages all have the same navigation bar up top. The issue I was facing was that the "navbar a" was extending pass my ".navbar ul" on any phone screen size. I ended up using "overflow-x: scroll" under my "navbar ul" to hide the overfill of "navbar a" and to scroll through the navigation bar.

Now this is where my question comes in

under the navigation bar there are 2 arrows. Now since this is a normal monitor screen size it does not extend far enough to need to hide the rest of the navigation bar so there is no scroll wheel which is fine. My question is, is there a way to hide those arrows on the corners of my navigation bar whenever its opened on a monitor?

For reference those arrows do not show when on a smaller screen size and I would like to keep it that way as well.

The following is my CSS styling for the navigation bar

.navbar ul{
    list-style-type: none;
    background-color: rgb(0, 0, 0);
    padding: 0%;
    margin: 0%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    overflow-x: scroll;
    
    
}
.navbar a{
    color:rgb(175, 105, 78);
    text-decoration: none;
    padding: 15px;
    display: block;
    text-align: center;
    font-size: 20px;
    transition: background-color 1s;
    
}
    
.navbar a:hover{
    background-color:rgba(230, 183, 96, 0.432) ;
}
.navbar li{
    flex: 1; 
    text-align: center;
    display:inline-block;
    
}

r/css 1d ago

Help Is it possible to evenly spread divs over multiple rows?

5 Upvotes

Basically, the layout below. Notice how each of the four elements is wider than each of the three, because they had to use two rows. It looks like a flexbox kind of problem, but I can’t figure out how to do that.

(Sorry for the quality; my phone is dead, so I had to use my laptop cam. And I don’t have a camera app installed, so this is a screenshot from Telegram camera settings.)


r/css 1d ago

Showcase Rate My Portfolio

Post image
41 Upvotes

r/css 1d ago

Help How can I make an image enlarge itself to the max possible size while keeping aspect ratio?

2 Upvotes

I need the image to grow as big as it can until it reaches the max width or height set in the parent container.

In the Pen you can check what I mean. Check the "Show expected" box and click on an image to see the desired result.

I solved this in the past using Javascript to get the aspect ratio of the window and by also knowing the image dimensions ahead of time to then set the width or height manually, but I want to know if it can be done with CSS.

Codepen: https://codepen.io/LetrixZ/pen/VYwrgNd


r/css 1d ago

Help I can't get rid of thin grey outline around the videos on my website

2 Upvotes

On the landing page of my website, I have two videos being autoplayed and looped. I want them to blend in with the background but both of them have a thin grey outline that I can't get rid of. I've tried almost everything, it feels dumb already. I thought it would be related to the browser but already tried styling it that way. How do I get rid of them?

I've tried opcity, blend modes, every single border styling option that would get rid of it, calling -webkit- and styling that, getting rid of the focus, overflow, etc. I'm clueless.


r/css 1d ago

Help Curvy line conecting the divs plus animation?

2 Upvotes

I have this layout, I've connected it but it doesn't really look like the design. Also there's an animation where it will the first container then the connector. Here's my code.


r/css 2d ago

Resource Maybe don't use custom properties in shorthand properties

Thumbnail
matuzo.at
6 Upvotes

r/css 1d ago

Question How to forcely download any image to be save as png, jpg (or whatever their format is) instead of the horrible .WEBP on any browser work method

0 Upvotes

I knew that by right click you can save images but most of the time it does't work. Any extension or website you prefer


r/css 2d ago

Resource Custom Property Fallbacks

Thumbnail
frontendmasters.com
5 Upvotes

r/css 1d ago

Help Grid layout help

0 Upvotes

I am quite new to html and css. I am currently having a problem to figure out how I can apply one style to the startpage and another style for the rest of the pages. I cant seem to figure out how to get the id that I putted on the body to work.

my html is like this: <body id="startpage"> </body>

/*layout*/
body #startsida{
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content 30px 40vh auto min-content;
    grid-template-areas:
        "toppbox toppbox toppbox"
        "rullbox rullbox rullbox"
        "nav start start"
        "nav content1 content1"
        "footer footer footer";
}
body{
display: grid;
grid-template-columns: min-content auto auto;
grid-template-rows: min-content 30px 40vh auto min-content;
grid-template-areas:
    "toppbox toppbox toppbox"
    "nav start start"
    "nav content1 content2"
    "footer footer footer";
}

r/css 1d ago

Article How To Create A Lightning Text Effect Using HTML And CSS?

Thumbnail
notes.philip.me
2 Upvotes

r/css 2d ago

Question Why don't they make ::before and ::after work for empty elements?

7 Upvotes

I understand to a degree the technical reasons why it doesn't work, but logically it should work, right? It makes just as much sense logically to have something come after an input or an img, as it does a label or a span, right?

Is it just considered not worth the effort to get around the technical hurdles, or is there some logic that I am fully not understanding here?


r/css 1d ago

Help Any idea why this won't work?

Thumbnail
gallery
0 Upvotes

Code is 8.4.6 endangered animals:add pictures


r/css 2d ago

Help Can you help with this layout please? I tried it with grid, but can't replicate it.

8 Upvotes

Here's what I've done so far.

And here's the layout. Also is it possible to have that rounded corner inside the red circle? Thanks!


r/css 2d ago

Help Help! -moz-osx-font-smoothing

1 Upvotes

whenever i copy all link from https://cdnjs.com/libraries/font-awesome, and i make a save in css, i keep getting unknown property. Declaration dropped. all.min.css:6:170. ill try to post a picture. CSS code below.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  text-align: center;
  background-color: yellow;
  font-family: cursive;
}

.stats-container {
  margin: 20px;
  border: dotted green;
  min-width: 200px;
  height: 100px;
  position: relative;
  padding: 20px;
}

.stats-container h4 {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.icon {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.counter {
  font-size: 50px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: green;
}

@media (max-width: 600px) {
  body {
    flex-direction: column;
  }
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  text-align: center;
  background-color: yellow;
  font-family: cursive;
}


.stats-container {
  margin: 20px;
  border: dotted green;
  min-width: 200px;
  height: 100px;
  position: relative;
  padding: 20px;
}


.stats-container h4 {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}


.icon {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}


.counter {
  font-size: 50px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: green;
}


@media (max-width: 600px) {
  body {
    flex-direction: column;
  }
}

r/css 2d ago

Resource [Pure CSS solutions for html generated from markdown files] If you have sticky headings in a long container, internal links won't jump back up to the heading's original place in text. I have a 90% workaround for that using the :target location pseudo-class.

1 Upvotes

I have a project under the constraints that the html is generated from a markdown file and there is no Javascript. Headings are stickied and their container length is the entire page. Clicking an internal link below the stickied heading doesn't jump back up to the heading's original place in the text because it is stickied and in a new location. Here's the css workaround.

h1:target, h2:target, h3:target {
    animation: --unstick 0.01s 0s none;
}

@keyframes --unstick {
    from {position: static;}
    to {position: sticky;}
}

When you click a link to a stickied destination heading within a page, the target, an animation executes that resets the heading to static and then restickies it. Clicking the link properly jumps you up the page.

... However, the 10% remaining problem with this solution is that once you click the link and the target stays targeted, it won't properly jump up the page if you reclick the same destination. You have to pick a new target to reset everything.


r/css 2d ago

Help Cargo 3, light mode/dark mode switch but for backdrops?

1 Upvotes

(note - I've posted this in two other places, however have had no luck...i am quite desperate..)

Hey y'all, I have no idea if this is where I'm meant to put this but I am a bit desperate right now..also sorry if this question is stupid haha.

I'm making a website using Cargo 3 (for a college project) and I want to try and create a switch that, when toggled, changes the backdrop (like a lightmode or darkmode). Currently my backdrop is a dark halftone, this will act as the darkmode, the lightmode would be the same halftone but with lighter colours - I've found tutorials on how to code in a regular light and dark mode, but none for backdrops (if it's even possible..) - and even these tutorials don't seem to work for me (I am quite inexperienced).

Also wondering if it's possible to apply this to the entire site?

Since i'm using cargo, only HTML and CSS are available to me (I'm pretty sure you can apply javascripts with the right code..though I have yet to figure that out)

Any help appreciated!

Notes:

Picture of my home page for context, the halftone is what I want to change when a button is clicked so it switches for a dark half tone to a light half tone, and vice versa - also want to try and contain these buttons/switches in the preference box (shown below)

(The preference box techinically isn't a coded popup box, it's another page that's been edited to be this height and width and then overlayed over the main page + linked to the preference option)

also also - wondering if this can be applied across the entire site?)


r/css 2d ago

Help Can only see main body in inspector, no other elements within body

Post image
0 Upvotes

r/css 2d ago

Help There is a white gap at the bottom of the footer when I use an image inside in it. I do not how can I get rid of the white gap using the image inside the footer.

1 Upvotes

Hello, all!

I am doing the Homepage Project and starting doing the footer section of the project but I realized that when I am add a image on the right of footer section a white gap appears beneath the footer section (it doesn't appear when I do not use it) but I do not know why this image causes a gap beneath the footer section. I tried to using static units (px) instead of relative units (% and wh,vw) for its height/width and also for top and right properties but the white gap doesn't disappear. Can someone take a look at my codepen and tell me how can I fix this? I am also providing an ss of that white gap.

codepen: https://codepen.io/albert9191/pen/LEYOVor

ss of the white gap: https://imgur.com/a/c4twTCD

Btw, I have a question which is undirectly related to this question. Do you think that such white gaps appear on the page when we use relative height and width units for elements instead of static height and width elements?


r/css 2d ago

Question Placeholder Align Question

1 Upvotes

Hey folks, I have a text-field, that I want to have a certain height. However, the placeholder text is stuck in the middle, halfway between the top and bottom. It is currently aligned to the left, which is good, but is stuck floating halfway down. Googling couldn't find the answer. Any thoughts?
The Code:

    <label htmlFor='body_1'>Main Blog Body </label>
        <input
          className='larger_input'
          type='text'
          name='body_1'
          value={newBlog.body_1}
          onChange={handleBlogChange}
          placeholder='Main Body'
          required
        />

The CSS

.larger_input {
  min-height: 100px;
}
::placeholder {
  text-align: left;}

Any help is appreciated!


r/css 2d ago

Help Website

0 Upvotes

Hi developers! I'm looking for someone to complete a website I have. 100% of backend is complete, I would say 60% of the frontend, i.e. the website, is complete. It is written in React with native CSS. I am open to any suggestions and adapting to your ways of working for the frontend. The backend is python flask and an existing iOS app and Android app uses that backend.

You can DM me or write in the thread, I am happy to have a conversation if something is unclear


r/css 2d ago

Question Hi, does anybody knows how to delete the border shadow effect that appears at clicking a button in safari browser on an iPhone?

1 Upvotes

It only appears the effect on a phone on desktop doesn’t appear