Enhance Your YouTube Comment Section with CSS Styling

I am brand new to css html and I'm attempting to create a comment display system similar to that of YouTube using only CSS. My goal is to have an image of the commenter displayed, followed by their username and comment text listed beside it. So far, I've managed to achieve this (Codepen Link). However, I need assistance in arranging the text and username below the user's picture to mimic the layout seen on YouTube comments.

.vjs-comment-list {
          list-style-type: none;
          position: relative;
          background: #fff;
          font-size: 3;
          position: relative;
          max-width: 250px;
          -moz-user-select: text !important;
          margin-bottom: 10px;
          font-family: "Times New Roman", Times, Arial, sans-serif !important;
        }
        
        .comment-user-name {
          top: 0;
          left: 80px;
          font-size: 10;
          font-family: "Times New Roman", Times, Arial, sans-serif !important;
        }
        
        .comment-profile-pic {
          top: 0;
          left: 0;
          width: 48px;
          height: 48px;
          background-repeat: no-repeat;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAJdEVYdENvbW1lbnQAKlKRRNAAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAK3SURBVFhH...
        
      
<ul style="list-style-type: none;">
          <li>
            <div class="comment-profile-pic"></div>
            <div class="comment-user-name">User 1</div>
            <div class="vjs-comment-list">testing comments testing comments testing comments testing comments testing comments testing comments testing commentstesting comments</div>
          </li>
          
          <li>
            <div class="comment-profile-pic"></div>
            <div class="comment-user-name">User 1</div>
            <div class="vjs-comment-list">testing comments testing comments testing comments testing comments testing comments testing comments testing commentstesting comments</div>
          </li>
        </ul>

Any help or guidance on how to properly align the text and username below the user's picture to resemble YouTube comments would be greatly appreciated.

htmlcss

Answer №1

By not explicitly defining a position on an element, it defaults to static position which restricts the use of top/bottom/left/right properties. To work around this limitation, you can set the position to absolute for .comment-profile-pic and .comment-user-name within their container that has a relative position.

Here is an example:

.comment-profile-pic {
     position: absolute;
     .
     .
     .
     top: 1%;
     left: 2%
 }

and so forth.

Alternatively, you may also consider using float (add float: left to the image's css rule) as an option:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery framework is causing AJAX/API data to be duplicated in the

I've been encountering a common issue for which I can't seem to find a straightforward solution. My current challenge involves using an API to fetch JSON data through an AJAX call. Upon receiving the data, it appears twice in both the console an ...

javascriptjqueryhtmljsonajax

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file. My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file? For instance: tailwind.config.js: const d ...

cssvue.jstailwind-css

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

What is the best approach to creating a fully rounded capsule using CSS?

I've been having trouble creating a complete capsule in CSS and I'm not achieving the expected outcome. Can anyone assist me in resolving this issue? I am new to CSS. Below is my code: <style> #myStyle { position: relat ...

htmlcss

In Internet Explorer, regardless of how much scrolling occurs, the document.body.scrollTop property will consistently be

While moving the mouse, I'm showing the value of document.body.scrollTop in the status bar. However, I have noticed that this value is consistently 0 in Internet Explorer. Why is it always 0 in IE? Is there an alternative method to determine how far t ...

htmlcss

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

Achieving consistent sizing for React-Bootstrap cards: A guide

In my React app, I am utilizing React-bootstrap and specifically the Card & CardGroup components. I need assistance in ensuring that all the cards have the same height. JSX component: <Card style={{flex: 1}} className="card"> ...

cssreactjssingle-page-applicationreact-bootstrapportfolio

Use a jQuery or XPath selector to choose certain HTML tags from a list of HTML tags

Consider this html structure : ... <div class="a">April 2018</div> <div class="b">Monday 02</div> <div class="c">...</div> <!-- Capture this tag and its children --> <div class="c">...</div> <!-- ...

javascriptjqueryhtmlxpath

Click the button to add content to the top section of the div using jQuery

Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...

javascriptjqueryhtmlcss

Error: Trying to access 'items' property of an undefined variable leads to a TypeError

I am currently working on creating a webpage with Angular 8 that fetches data from a REST API in JSON format by passing the request ID. My goal is to display this data in an HTML table that I have created. However, I encountered the following error: Typ ...

htmlangulartypescript

Moving files by dragging and dropping rather than deleting them

I have successfully implemented a feature using JavaScript to drag and drop multiple files, followed by displaying those images. The code below is fully functional without any errors. Need help with: I am now looking to add the ability to remove these ima ...

javascripthtmljquerydrag-and-drop

The dimensions of the HTML table have expanded excessively following the execution of mysql_fetch_assoc

I have encountered an issue where, after inserting the database values into an HTML table, the table becomes too large. I've tried using CSS code to adjust it, but it doesn't help. Should I consider changing something in the database value type? ...

phphtmlmysqlsqlhtml-table

Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

Is there a way to stop Internet Explorer 11 from automatically zooming to fit the viewport width? I need the browser to respect my max-width rule and not scale the content to fill the entire width of the viewport on its own. This issue is happening in IE ...

cssinternet-explorerwindows-8.1internet-explorer-11meta

Importing CSS into the styles section of angular.json is no longer feasible with Angular 6

Currently in the process of migrating a project to Angular 6, I'm facing an issue with importing my CSS file within the styles section of angular.json: "styles": [ "./src/styles.css", "./node_modules/primeng/resources/primeng.min.css", ...

cssangular

"Position the label on the left and input on the right for

Having trouble with label and input alignment - I've attempted: <div class="form-group"> <label class="control-label" for="" style="float: left;font-size: 20px;padding-right: 10px;">ID : </label> <input style= ...

htmlcss

Struggles with embedding a table within a form while working with jQuery Mobile

Currently facing a problem trying to embed an HTML table inside a form in a jQuery Mobile environment. An error message pops up: Uncaught TypeError: Cannot read property 'not' of undefined The Chrome debugger points to this line in jquery.mobil ...

htmlformsjquery-mobilehtml-table

Continuously spinning loading icon appears when submission button is triggered

We are currently experiencing some issues with our mobile forms. Our users utilize a mobile form to submit contact requests, but the problem arises when they hit 'submit' - the loading icon continues to spin even after the form has been successf ...

javascriptjqueryhtmlajaxforms

Updated INNER header and footer - unrelated to the answered questions

After observing, the inner-header and inner-footer div scroll along with the area that contains the select list. How can I make that area scroll down while keeping the inner-header/footer fixed within the content? I hope my query is understandable. Thank ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

What is the best way to adjust width in Bootstrap for responsiveness?

Is there a way to change the width of div elements using only Bootstrap for responsiveness? I want the div elements to increase their width to 50% when the screen width is reduced to around 600px, but I can't find a breakpoint for the w-* class. I a ...

htmlbootstrap-4