I'm currently working on modifying the layout of this HTML page. I want to include a bot icon next to each bot response, and I also need to decrease the space between consecutive messages.
https://i.sstatic.net/lBiMD.png
Any suggestions on how I can accomplish this? Right now, the bot icon is appearing in the user's margin instead.
Are you finding this information useful?
* { box-sizing: border-box; } body{ overflow-y: scroll; overflow-x: hidden; width: 100%; flex: 1; min-height: 580px; height: 100%; width: 270px; background-color: #f4f4f4; } .user-bar{ height: 35px; width: 35px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwxLzR_wVDg6DKEiQ90XGffgrZLF7_s_vaPA&usqp=CAU%27'); background-repeat: no-repeat; background-position: right; margin-right: 10px; float: right; }
.bot-bar{ height: 35px; width: 35px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhgCkQbZmKeeMEys7nRNSem1zMFlYODegmmw&usqp=CAU%27'); background-repeat: no-repeat; margin-left: 5px; margin-top: -40px;}
.user-box { margin-top: 5px; border-radius: 12px 0 8px 12px; padding: 8px 8px; width: max-content; max-width: 170px; background-color: rgb(0,58,111); color:#fff; margin: 5px; text-align: left; font-size: 13px; font-family: arial; position: relative; box-shadow: 1px 1px 2px 2px #cbe9ff; white-space: normal; word-wrap: break-word; float: right; font-family: Calibri, "Helvetica Neue", Arial, sans-serif !important; font-weight: 100 ; }
.response-box { margin-top: 15px; border-radius: 0 12px 12px 8px; border: 1px solid; padding: 8px 8px; display: block; text-align: left; width: max-content; max-width: 220px; background-color: #ffff; color: #156c8a; position: relative; clear: right; margin:5px; font-size: 13px; font-family: arial; box-shadow: 1px 1px 1px 1px #ccc; white-space: normal; word-wrap: break-word; margin-left: 46px; font-family: Calibri, "Helvetica Neue", Arial, sans-serif !important; font-weight: 100px ; } <body>
<div class="user-bar"></div>
<p class="user-box">hi</p>
<p class="response-box">Hi! I'm your virtual assistant!</p>
<div class="bot-bar"></div>
<p class="response-box">How May I help you?</p>
<div class="bot-bar"></div>
<div class="user-bar"></div>
<p class="user-box">login issue</p>
<p class="response-box">sure I can help you with this</p>
<div class="bot-bar"></div>
<p class="response-box">Please confirm your email id.</p>
<div class="bot-bar"></div>
</body>Modifications
1.
<div class="bot-bar"></div><p class="response-box"></p>margin-top: -40px; to the .bot-bar stylemargin-left: 40px; in the .response-box style to margin-left: 46px;
I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...
I am trying to access the localhost:3000/admin which is located in my views. The index.html and admin.html are two separate base files, one for users and the other for the admin dashboard respectively. Here is a snippet from my app.routes.js file: angul ...
I am currently developing an uploader feature for my website located at To enhance user experience, I aim to display a loading animation in the form of a .gif image while the select box is being populated with subcategory options via an AJAX request. Bel ...
Looking to design a div with an inner circle in the corner similar to the image below. Seeking assistance to find a solution for this issue. ...
Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...
Hey there! I'm currently tackling a web project that involves incorporating two form tags on one page, each with its own distinct purpose. Nevertheless, it appears that the inner form tag isn't behaving as it should. My suspicion is that this iss ...
I am attempting to utilize Firebase for both uploading a file and storing it in my database simultaneously. I want to track the number of uploads so that I can rename each file uniquely. While I have successfully uploaded and stored a copy in the database, ...
I am currently working on showing or hiding div elements based on the status of a radio button. These divs are located after the input buttons in a different section of the page, and I am facing challenges in referencing them accurately. This code is for ...
While this code snippet functions perfectly in WebKit browsers, it encounters issues when used in IE and Firefox. Unfortunately, due to other necessary functionalities, using the img tag is essential, making background-image an unviable option. Code Snipp ...
My <span> tag has a background color and left and right padding applied to it. However, the padding is only visible at the beginning and end of the <span>, not on each line when the text wraps onto multiple lines. Is there a way to add padding ...
I've been trying to troubleshoot this code, but the padding just won't cooperate and I can't seem to figure out why. .img-caption { visibility:hidden; width:22%; height:435px; background-color:#f9f4e3; ...
While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...
I'm having trouble with my PHP form submission. Every time I try to submit, I receive a custom error message that says "Oops there was a problem. Please try again." Any assistance would be greatly appreciated. As a newcomer to PHP, I suspect that som ...
Can you provide guidance on adding ::before pseudo-element inside an anchor tag? https://i.sstatic.net/tojNE.jpg ...
Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...
I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...
Designing a website that is accessible to everyone is truly an art form, and Progressive Enhancement is something I hold dear... I am curious to hear about the best techniques you have used to ensure websites work for all users, regardless of their browse ...
I currently have a CSS style defined as follows: [class*="col-"] { border: 1px solid #dddddd; } This particular CSS definition gives borders to all of the bootstrap grid columns on my page. However, I now want to apply borders only to the bootstrap ...
After reviewing W3C's information about the role attribute, I am still unclear about its purpose. Is the role attribute meant to simply clarify the code, or do some browsers or spiders interpret it in a specific way? Could the role attribute serve as ...
Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...