/r/css
A community for discussing about CSS (Cascading Style Sheets), Web Design and surrounding relevant topics. Feel free to discuss, ask questions, share projects and do other things related to CSS here.
CSS, short for Cascading Style Sheets, is used almost universally across the web to affect the design and appearance of every website you visit. Here in /r/css, you've got a place on reddit to talk about CSS, whether you're new to CSS and want to learn, or a pro wanting to discuss the engineering and usability reasons that all modern browsers ignore
We welcome all CSS discussion here. If you need help with styling your website or your reddit, or want to share a neat trick you cooked up, it's welcome here!
/r/css
Here's the layout I"m working on.
Each card has an image, then a H2 tag for the title, and then an excerpt.
I want the excerpt to show for the first 2 cards only and then not visible for the rest. I can't for the life of me get this to work!
The HTML
<div class="blogcard col-span-2 pb-6 bg-white drop-shadow-sm">
<img src="<?php echo the_post_thumbnail_url(); ?>" alt="" class="w-full h-auto mb-10">
<div class="blogcard-text px-12">
<a href="<?php the_permalink(); ?>"><h2 class="font-bold mb-8"><?php the_title(); ?></h2></a>
<?php echo '<p class="excerpt">' . get_the_excerpt() . '</p>' ?>
</div>
</div>
The CSS .blogcard { font-family:"nunito"; color:#40526A; font-size:18px; line-height:30px; }
.blogcard h2 {
font-family:"museo";
font-weight:700;
font-size:25px;
color:#122947;
}
.blogcard:nth-child(1), .blogcard:nth-child(2) {
grid-column: span 3;
}
i've made different tables/lists/ grids/review box and cards but how do i align them, like i want the cards and list to be side by side but the grey box in the next line to them and then in the next line i want the ble and green grid and at last the review/comment box. please help, it's for a project! thankyou for those who helped.
Hello, Im doing the codecademy front end course on the first project it assigns and i cannot for the life of me get the background-image in my css to load with a relative file path.
Im new to this so hopefully im providing the correct information. The background image must be added to the H1 element, and so I have
h1{
background-image: url (resources/images/pattern.jpeg);
then some other css for the h1
}
If i replace that relative path with a link to the image online it works perfectly well. My file structure is
coding\codecademy\resources\images
for the image, and
coding\codecademy\resources\css\index.css for the css file.
please tell me what I am doing wrong :^)
So basically i was building a website on elementor, and well theres a code that interferes idk how with the "responsive" feature on elementor its this one:
So basically a layer that i built for pc appears in mobile, a layer for tablet appears on pc, and vice-versa
and it somehow interferes with the responsive part of elementor
website: Acuradefinitiva.com (monkey dont know how to code)
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <script> $('.delay').hide();setTimeout(function() { $('.delay').show(); }, 10000); </script>
Sorry if im question looks stupid, im just a starter Web developer.
I tried asking the Ai but he always made it worse thats why, im asking you for an solution.
Take a look at the two images, you´ll see that the second image (green light) looks more nice, i mean the boxes are in one line under by under, not that the one input box is more to left than the upper input box, i tried setting same width,margin,padding nothing worked
my html code:
<!DOCTYPE html><html><head><title>Titel</title><meta charset="ISO-8859-1"><meta name="description" content=""><meta name="author" content=""><meta name="keywords" content=""><meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"><link href="style.css" type="text/css" rel="stylesheet"></head><body><div id="FORM"><p id="TIT">Get in Touch</p><label>Your Name:</label>
<input type="text" placeholder="your name"/> <br />
<label>Your Email:</label>
<input type="text" placeholder="\\\[\[[your@email.com](mailto:your@email.com)\](mailto:[your@email.com](mailto:your@email.com))\\\](mailto:\[[your@email.com](mailto:your@email.com)\](mailto:[your@email.com](mailto:your@email.com)))"/> <br />
<label>Your Website:</label>
<input type="text" placeholder="your-website.com"/> <br />
<label>Your Subject:</label>
<input id="sub "type="text" placeholder="your subject"/> <br />
<label>Your Message:</label>
<input id="mes" type="text" placeholder="your message"/> <br />
<input id="sen" type="submit" name="Send"/> <br />
<input id="res "type="reset" name="Reset"/> <br />
</div></body></html>my css code:
#FORM,p {
text-align: center;
line-height: 45px
}
#FORM {
border-radius: 30px;
background-color: green;
width: 18%;
position: absolute;
left: 500px;
top: 150px
}
#TIT {
}
#sub {
}
#mes {
}
#sen {
}
#res {
}
Hi guys im now working on that single idea from my boss for to long and cannot find a solution..
First of all, sorry for my bad drawing.
We have this website we’re on many pages there are tables the tables are pretty large both vertically and horizontally. I got the task to make the horizontal scrollbar in the table sticky and also the footer. The footer was no problem, but I honestly don’t know how to make the horizontal scroll bar sticky. The first thing I have done is putting the whole table in a container and then have its own horizontal and vertical scrollbar. But he didn’t want that.
Summary :
-On the table, you can change the rows per page. -The vertical scroll bar should be the browser scroll bar -The footer and the horizontal scroll bar should be sticky.
If someone Has experience with vue-good-table and vue 2 it would be good because that’s what we are using…
[SOLVED]
How can I target and remove this extension sidebar entry from the sidebar menu?
Hey all, I'm trying to darken a background video for my website and I'm having some issues (See attached codepen, I've tossed a placeholder video in to show what I'm doing).
I'm trying to set background-color on the div the video is in, but it doesn't seem to make a difference; is this something basic I'm missing?
https://codepen.io/Tribalbob/pen/gbYyWBO
EDIT: Thanks to u/abidelunacy, filter:brightness(80%) was what I needed!
Hi all, I'm currently studying web dev at school, and I have a little project to do, where we have to use flex, grid or bootstrap to replicate a web from an image. I'm absolutely bad with the display part part of the frontend, so I chose to do it with grid, since I consider flex harder and bootstraps gives you half done (according to the tacher), but I'm struggling a little to find a correct way to structure it, I've tried to times to do the project from scratch but the template seems to be wrong, so this time I've thought how to do it, and draw it, so I can visualize it more clearly, but idk if it would work as I think, so before losing the time for third time I thougt of asking y'all
This is the site I have to replicate
Processing img emqa8canajge1...
And this is the template I've thought of with the basic code at the right
Processing img ofwyxoklbjge1...
What y'all think of it? Would it work fine as it is drawn and written? Idk if it's good to use so many display:grid inside anothers
I'm very bad at flex and grid
Hi,
I am trying to build a planet that moves on an elliptical path around a sun... Like looking at the solar system from the side....
I found that I can't just use two transforms on the same element as only the lat one will happen and I need to use a child element and have X on one and Y on the other... However, I just can't figure out how to get it to be an elliptical movement even with using ease-in/ease-out....
Any suggestions how to get this working?
Thanks
Pax
Is it possible to match a selector if the selector name changed by searching the DOM based on width or height or something that may be familiar from the previous selector ?
I’m an experienced developer/data scientist with experience in Oop and functional programming with languages including C++, Haskell, Python and R. Partly as a challenge and partly out of necessity I am now learning front end development with a strong focus on CSS. I’ve read many times that people don’t recommend books due to the rapid evolution of CSS. Nevertheless I wonder if there are any good books that teach CSS fundamentals well, that are well-complemented with some recent online resources (YouTube series’, Blogs, courses, whatever).
So I am looking for appropriate recommendations. I have access to Linkedin Learning.
Many thanks in advance!🙏🙏
Having been inspired by Bootstrap's 12 column grid, I created a 12 column layout using CSS grid and I would love to know your thoughts. Is this implementation acceptable or is there a better way to write this?
The third box is the last one I clicked and there's a blue border around it. I used
outline: none; box-shadow: none;
which work for buttons but not these checkboxes. How can I fix this?
Thanks
There was a programmer coding
Waiting for the site; 'twas loading
The man had no luck
The stylesheet sucked
Then the programmer was loathing
Best way to name two word class?
Eg. .new-class Vs .new_class
Hyphens are good to write and read.
While underscores are good to copy and paste.
I was using hyphens but as most of this time I use copy paste way, I want to use the underscores.
What do you think?
Container or Media queries
I'm looking into rewriting a self-made responsive framework that consists of Sass and JS files. Much of the functionality is based on media queries, but now I'm looking into Container queries.
Are they meant to replace media queries? Do I still stick to the smallest is default and build upwards, or big to small? Should I choose either Media or Container, or is it a good idea to use both together?
This is Pico CSS, after clicking the button a blue border remains. This also happens to the buttons of picocss.com but not the toggle button. In my app, it happens to every button. Is there a way to remove it?
Edit: Fixed using this:
.theme-toggle:focus { outline: none !important; box-shadow: none !important; background: none !important; }
I've been working on a collection of CSS animations element templates to use in a few different projects such as this: https://codepen.io/FireTamer/pen/raBqYqw
The pen linked above works exactly as I need it too, however, I went to cannibalize it and mix it with another "effect" and found that it doesn't work on multi-line elements (I found that position: absolute doesn't wrap words like normal).
Trying to figure out the issue, I made a second pen of the original effect and stripped it of everything I didn't need at the moment, but I haven't been able to figure it out: https://codepen.io/FireTamer/pen/azoXOEX
How would I overlay the first span on top of the 2nd one completely? (No white text shown since that's the first step for copying the first pen).