Home › Forums › Basel support forum › CSS to move Rectangular label to Bottom Left

CSS to move Rectangular label to Bottom Left

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 26, 2019 at 6:18 pm #152592

    oleg_dmitriev
    Participant

    Hi your theme is very nice to work with, well done!

    When I introduce CSS (below) to move labels to Bottom Left, they move on the Category page, but not on the Product page. Please send CSS to move Labels to Bottom left on the Product page.

    https://imgur.com/a/esBLVqZ
    https://imgur.com/a/Q70R8NW

    My CSS
    .labels-rectangular {
    top: auto;
    bottom: 15px;
    left: 0;
    right: auto;
    }
    Thanks in advance!

    October 26, 2019 at 9:00 pm #152624

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .product-grid-item  .labels-rectangular {
   bottom: 5px;
   top:auto;
}

body .single-product-content .product-images .labels-rectangular {
    bottom:75px;
    top:auto;
	  left:20px;
	  right:auto;
}

    Best Regards

    October 26, 2019 at 10:52 pm #152631

    oleg_dmitriev
    Participant

    Thank you! it worked fine, perfect!
    In fact I changed Left Bottom in the Product Grid, and Right Top on the Product Page, but the main principle remained the same:

    body .product-grid-item .labels-rectangular {
    bottom: 15px;
    top:auto;
    }
    body .single-product-content .product-images .labels-rectangular {
    bottom:auto;
    top:15px;
    left:auto;
    right:15px;
    }

    October 27, 2019 at 7:00 am #152647

    Elise Noromit
    Member

    Hello,

    The reason was the selector. I have changed it if you have noticed it. If you have any questions please feel free to contact us.

    Best Regards

    October 27, 2019 at 9:26 am #152665

    oleg_dmitriev
    Participant

    Thank you! I saw that you specified product grid and single product content, and that made the whole difference! thanks for your great help

    body .product-grid-item .labels-rectangular
    body .single-product-content .product-images

    October 27, 2019 at 10:58 am #152673

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘CSS to move Rectangular label to Bottom Left’ is closed to new replies.