What is the best way to ensure a div stays inline with the main product box?

https://i.sstatic.net/KM3T2.png https://i.sstatic.net/tcUDg.png

.product-row {
    margin: 0px 0px 0px 0px;
}

 .product-box {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding: 15px;
   margin: 0px 26px;
   position: relative;
   overflow: hidden;
}

.p-img-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.p-img a, .p-img {
    width: 100%;
    height: 100%;
    display: flex;
}

.p-img a img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

.label-sale {
    position: absolute;
    top: 10px;
    right: -30px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 5px 12px;
    transform: rotate(45deg);
    width: 110px;
}

.product-box .product-icon {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
   top: 220px;
    left: 5px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(40%);
    transition: opacity 0.5s, transform 0.5s;
}

.product-box:hover .product-icon {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.product-box:hover .product-icon,
.product-box:not(:hover) .product-icon {
    transition-delay: 0.1s;
}

.product-icon li a {
    padding-left: 50px;
    width: 46px;
    height: 46px;
    box-shadow: 0 15px 25px #00000014;
    border-radius: 50%;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
    margin-bottom: 13px;
    transition: .3s;
    color: #000;
    background: #fff;
}

.product-icon li a:hover {
    color: white;
    background: #51adcd;
}

.product-icon .icon-1{
    position: absolute;
    top: 16px;
    left: 68px;
}

.product-icon .icon-2{
    position: absolute;
    top: 16px;
    left: 138px;
}

.product-icon .icon-3{
    position: absolute;
    top: 16px;
    left: 208px;
}

.product-title a {
    color: black;
    font-size: 16px;
    font-weight: inherit;
    text-decoration: none;
}

.product-title a:hover {
    color: #51adcd;
}

.product-price s {
    color: gray;
    font-weight: 700;
    font-size: 15px;
}
.product-price span {
    color: #51adcd;
    font-weight: 700;
    font-size: 15px;
}
<div class="product-box">
  <div class="product">
    <div class="img-product">
        <a href="">
            <img style="width: 100%;" src="homepagepicture/shoes1.webp" alt="">
        </a>

        <figure style="background: #e12c43; color: #ffffff;" class="label-sale">
            <span>-20%</span>
        </figure>

        <ul class="product-icon">
          <li class="add-cart mr-0">
            <a href="">
              <i class="fa-solid fa-bag-shopping icon-1"></i>
            </a>
          </li>
          <li class="view-product mr-0">
            <a href="">
              <i class="fa-solid fa-magnifying-glass icon-2"></i>
            </a>
          </li>
          <li class="add-favorite mr-0">
            <a href="">
              <i class="fa-regular fa-heart icon-3"></i>
            </a>
          </li>
        </ul>
    </div>
    <h4 class="product-title">
       <a href="">Aero Wave 19</a>
    </h4>
    <p class="product-price">
       <s class="">$156.00</s>
       <span class="">$124.95</span>
    </p>
  </div>  
</div>

The movement of the product icons along with the product box is not responsive even after setting the product-box to relative position. The label sale moves correctly but the picture icon does not. I have attached some images showing what needs to be fixed.

htmlcssbootstrap-4

Answer №1

Eliminate the padding and include the following style

.product-icon li a {
/* Delete commented padding */
/* padding-left: 50px; */
width: 46px;
height: 46px;
box-shadow: 0 15px 25px #00000014;
border-radius: 50%;
margin-left: 10px;
margin-right: 10px;
display: block;
margin-bottom: 13px;
transition: .3s;
color: #000;
background: #fff;
/* Integrate these styles */
text-align:center;line-height:46px;}

Erase the following icon styles

.product-icon .icon-1{
position: absolute;
top: 16px;
left: 68px;}
.product-icon .icon-2{
position: absolute;
top: 16px;
left: 138px;}
.product-icon .icon-3{
position: absolute;
top: 16px;
left: 208px;}

.product-icon{padding-left:0;}

Does this align with your expectations?

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

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

htmlcssformsbootstrap-4inline

Navigate to a different URL following a post request using AJAX and EXPRESS

Currently, I am diving into the world of node.js servers by creating a login website. Users can input their username, which is then sent via an ajax post request to the server and stored in an array of all users. My goal is to redirect users to a personali ...

javascripthtmlnode.jsexpress

Include a series of HTML attributes within an HTML element

I need to take a string of attributes that are formatted in valid HTML and apply them to a specific HTML element, rather than just creating a new string with those attributes. For instance, I have a variable named attributesStr that contains the string of ...

javascriptjqueryhtmlattributes

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

htmlcsssvgwebfrontend

Activate scroll function exclusively upon hovering over specific object

I am working on a page with an object that allows users to zoom in and out. I want to create a special zoom function that will be triggered when the user scrolls while their cursor is hovering over this object. If the cursor moves away from the object, th ...

javascripthtmlscroll

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

javascriptcssreactjs

Selection of country and state in a form

Within the "My Account" form for users, I have implemented two select fields - one for country and one for state. These fields are automatically populated with lists from countries.js, which is functioning well. However, whenever a user accesses their acco ...

phphtmlforms

javascript: obtain the height of the pseudo :before element

Can someone help me figure out how to get the height of a pseudo :before element? I've tried using jQuery but it's not working as expected. Here's what I attempted: $('.test:before').height() // --> null If you want to take a ...

javascripthtmlcss

Setting character limits within textareas based on CSS classes in a dynamic manner

I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studi ...

javascriptjquerycssdebugging

Issues with Django's rendering of HTML tags

I encountered a problem while working on my forms.py file where I have an error message to pass to a template, but the template is rendering the message as a string instead of an HTML tag. Here is the relevant code snippet from forms.py: message = (" ...

pythonhtmldjangodjango-templates

The vertical size of user inputs within Bootstrap grids

Currently facing some issues with the height of input fields in a form while using Bootstrap 4. The form design is based on Bootstrap's grid system, where each input field has a corresponding label placed to its left (unless the screen size is small, ...

bootstrap-4

The navbar-fixed-top class in Bootstrap seems to be malfunctioning

As I work on expanding my portfolio website using Bootstrap, I decided to incorporate the 'navbar-fixed-top' class to make the navigation bar stick to the top of the window. I found a helpful example of this feature here: https://getbootstrap.co ...

htmlcsstwitter-bootstrapbootstrap-4

Incorporating a PHP line into a CSS file that is dynamically generated by PHP code

Struggling with adding a get_template_directory_uri() in a CSS line located in a boxes.php file. $box_first = 'linear-gradient(rgba(0, 175, 227, .8), rgba(0, 175, 227, .8)), url("/wp/wp-content/themes/my_theme/inc/img/boxes/box2.png") center ...

phpcsswordpress

changing the vertical position of an element using JavaScript

I'm currently working on a project where I have a canvas that animates upwards when a button is clicked. However, I'm facing an issue with making it go back down after the animation completes. It seems to be getting stuck and not returning to its ...

javascripthtmlhtml5-canvas

What is the best way to implement custom sorting for API response data in a mat-table?

I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...

htmlangulartypescript

Changing textarea html content to an iframe in real time with the use of jQuery

Is it possible to use jQuery to transfer HTML content entered into a textarea to an iframe in real time, without refreshing the page? I have searched for a solution but have not found a clear direction. Any code snippet and explanation would be greatly ap ...

jqueryhtml

When div elements styled with d-inline are used, they are displayed on two separate rows

Can anyone help me figure out how to display two or three divs on one line instead of two in Bootstrap4 using row/col? I've tried different variations but they always appear on separate lines. Here is the jsfiddle with my code. The two sets of code ar ...

bootstrap-4inlinecol

Changing the tooltip background color in FullCalendar 6 and Bootstrap 5: A step-by-step guide

My FullCalendar agenda displays events with colored backgrounds. However, I want the tooltips for these events to have matching background colors as well. Currently, the tooltips always show up with a black background. Is there a way to dynamically change ...

javascripthtmlfullcalendarbootstrap-5fullcalendar-6

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

javascriptjqueryhtmlhtml5-canvas

Is there a way to stylize the initial words of a brief text block by blending small caps with italics, all while avoiding the use of a span tag?

I have a series of images with numbered captions like "Fig. 1", "Fig. 2", "Fig. 3", followed by a brief description on the same line. Is there a way to programmatically style these strings (the “Fig. #” only) using CSS or Javascript to make them italic ...

javascripthtmlcss