Search the Community

CSS in one of my nightmares, it is the one thing that causes me the most frustration. I have a question for those who are a bit more graceful with it than I am - I have a comment area in a practice project, it looks like this -> <div class="comment-content d-flex"> <div class="comment-author"> <img src="img.jpg" alt="author"> </div> <div class="comment-meta"> <a href="#" class="post-author">Commenter Name</a> <a href="#" class="post-date">Comment date</a> <p>Donec turpis erat, scelerisque id euismod sit amet, fermentum vel dolor. Nulla facilisi. Sed pellen tesque lectus et</p> </div> <!-- I added this area myself <div class='d-flex align-items-center'> <a href='#' class='comment-like'><span><i class="fa fa-thumbs-up"></i> like</span></a>&nbsp;&nbsp; <a href='#' class='comment-respond'><span><i class="fa fa-comment"></i> respond</span></a> </div> --> </div> in the area that I commented that I added myself .comment-like and .comment-respond are not yet defined. At the moment it flows to the right of the comment area and I want them below it. Easy enough to do with positioning except that I need it to be positioned relative to the content of the comment that it belongs to. This whole block will eventually be echoed from a PHP class but I like to get the styling and html correct on the page it will display on first (probably like most people). Can I get some advice on the best way to resolve this issue from you folks please. TIA

In my project I have a CSS custom variables like this: :root { --primary-color: #e04c4c; --secondary-color: #2c2c5e; --text-color: #d67900; } In my LESS files I have used LESS color functions to get more colors base on its primary and secondary. This is how its look like: .component1 { background: darken(--primary-color, 10%); } .component2 { background: lighten(--secondary-color, 5%); } But when I compile this, it gives an error like this? When googling I found a solution for SASS, but not for LESS. Can anybody tell me is there any possible workaround for this particular case? Thank you.

I have made a small CSS image slider for my webpage, but have a few issues with the slider and my images. The images differ in size on the screen (although I have made sure the images were the same size before upload). I have written code for three images, the first image of the slider is too high, the second image is great, third image is lower than the second and first image... and then it shows a fourth blank image? HTML Code: <div id="slider"> <figure> <li><img src="http://xxx/jkhzmGV.jpg" /></li> <li><img src="http://xxx/49RqNB5.jpg" /></li> <li><img src="http://xxx/7nrTa5p.jpg" /></li> </figure> </div> CSS Code: @keyframes slider { 0% { left: 0; } 20% { left: 0; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } #slider { overflow: hidden; } #slider figure img { width: 20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slider infinite; } }