CSS elements in custom css no display in frontend

Question

It modifies the template and basically all the elements CSS that I want to change I copy code and add to the "custom css" panel and then everything works fine.

I ran into a problem with two elements that I can't change in any way. When I add code to "custom css", the old code on the frontend is still displayed.

Sample product page: https://martfury05.magebig.com/libwx-3pcs-food-pocket-for-infant-toddlers.html

I need change "add to cart" button width:

as always I copy this code to custom css:

.box-tocart .actions .tocart, .box-tocart .instant-purchase {
    display: inline-block;
    height: 52px;
    min-width: 500px;
    text-align: center;
    border-radius: 2px;
    text-transform: capitalize;
    font-weight: 500;
    border: 1px solid #fcb800;
    background-color: #fcb800;
    color: #000;
    margin-right: 20px;
    margin-bottom: 10px;
}

but after saving no changes.

Also here I have the same issue with fotorama:

also I copy below code and paste in custom css but after save still no result on frontend.

.fotorama__stage__frame .fotorama__img {
    height: auto;
    left: 50%;
    max-height: 100%;
    max-width: 70%;
    position: absolute;
    top: 30%;
    -webkit-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    transition-duration: .3s;
    transition-property: width,height,top,left;
    vertical-align: middle;
    width: auto;
}

Everything else works fine. Can someone tell me if I should maybe give a different css path?

why did you give me a downside? My question is relevant and in accordance with the rules. — Tom Arm
– Tom Arm, Commented Apr 16, 2021 at 14:27
Please read How do I ask a good question? and How to create a Minimal, Reproducible Example — Rojo
– Rojo, Commented Apr 16, 2021 at 14:38

Saeed sdns · Accepted Answer · 2021-04-16 15:17:01Z

1

Some notes:

you can use > CSS selector to give higher priority to the element. For example:

.parent-class > .no { text-decoration:none !important; }

if you use WordPress or Joomla or other CMS, clean its cache.
check your css file path
clean your browser cache with Ctrl+F5 or browser history
check you write your class names correctly
if you work with frameworks like react, vue or angular, it may be due to the encapsulation feature.

answered Apr 16, 2021 at 15:17

Saeed sdns

99610 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS elements in custom css no display in frontend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related