CSS doesn't apply

Question

I'm editing the css for a module of prestashop but all the changes I set don't appear on my site. I tried to delete the CSS stylesheet to be sure i was working on the right CSS and all the properties were gone, so I tried to comment one by one all the strings to find out the problem but when I uploaded it the properties were there.

Site: backlabel.com look at the newsletter block on the Footer, precisely at the <button> where I tried to remove the position:absolute

the CSS stylesheet

/* Block newsletter */

 #columns #newsletter_block_left .form-group {
   margin-bottom: 0;
 }

 #columns #newsletter_block_left .form-group .form-control {
   max-width: 222px;
   display: inline-block;
   margin-right: 6px;
 }

 @media (min-width: 768px) and (max-width: 1199px) {
   #columns #newsletter_block_left .form-group .form-control {
     margin-bottom: 10px;
     margin-right: 0;
   }
 }

 #columns #newsletter_block_left .success_inline, #columns      #newsletter_block_left .warning_inline {
   text-align: left;
   padding: 1px 0 0 0;
   margin-bottom: -19px;
 }

 #columns #newsletter_block_left .success_inline {
   color: #418B19;
 }

 #columns #newsletter_block_left .warning_inline {
   color: #f13340;
 }

 /* Block newsletter footer */ 
 #footer #newsletter_block_left {
   -webkit-transition: all 0.5s ease-in-out 0s;
   transition: all 0.5s ease-in-out 0s;
 }

 #footer #newsletter_block_left form {
   position: relative;
   margin-top: 35px;
 }

 #footer #newsletter_block_left .form-group {
   margin-bottom: 0;
   margin-top: 20px;
 }

 #footer #newsletter_block_left .form-group .form-control {
   height: 40px;
   line-height: 30px;
   width: 100%;
   padding: 5px 40px 5px 15px;
   display: inline-block;
   background-color: transparent;
   border: 1px solid #adadad;
 }

 #footer #newsletter_block_left .form-group .button-small {
   color: #999999;
   font-size: 17px;
   border: 0;
   background: transparent;
   /* HERE IS WHERE I REMOVED THE POSITION:ABSOLUTE */
   right: 0px;
   top: 0px;
   padding: 8px 10px;
 }

 .rtl #footer #newsletter_block_left .form-group .button-small {
   left: 0px;
   right: auto;
 }

 #footer #newsletter_block_left .form-group .button-small .icon {
   position: relative;
   top: -1px;
 }

 #footer #newsletter_block_left .form-group .button-small:hover {
   color: #fff;
 }

 #footer #newsletter_block_left .warning_inline {
   display: block;
   color: #f13340;
   font-size: 13px;
   line-height: 26px;
   clear: both;
 }

 @media (min-width: 1200px) {
   #footer #newsletter_block_left .warning_inline {
     display: inline-block;
     position: relative;
     top: -35px;
     margin-bottom: -35px;
     left: 15px;
     clear: none;
   }
 }

 #footer #newsletter_block_left.active {
   right: 0;
 }

 #footer #newsletter_block_left .form-group.form-error input, #footer  
 #newsletter_block_left .form-group.form-error textarea {
   background: none;
   background-color: #fff1f2;
 }

Answer 1

All ecommerce shops are heavily cached so try disabling it.

Prestashop version 1.4 and above caches data using Smarty. Cached data is stored in the following folders:

/tools/smarty/cache

/tools/smarty/compile

/tools/smarty_v2/cache

/tools/smarty_v2/compile

all of which are located in your Prestashop's installation folder. For example, if your Prestashop store has been installed in the public_html folder of your hosting account, cached information can be found in:

public_html/tools/smarty/cache

public_html/tools/smarty/compile

public_html/tools/smarty_v2/cache

public_html/tools/smarty_v2/compile

Ref Siteground

Also if you're using chrome, open your dev tools and head to the network tab. At the top of the tab check the checkbox that says disable cache. This will disable the cache when the dev tools is open.

Answer 2

#footer #newsletter_block_left .form-group .button-small {

  color: #999999;

  font-size: 17px;

  border: 0;

  background: transparent;

  position: initial;

  right: 0px;

  top: 0px;

  padding: 8px 10px;

}

This is exactly what I am seeing here on my browser so what you are experiencing is most likely caused by an old cached version somewhere on your system. It can't be due to prestashop or your host directly since I am seeing the updated version, so to fix the problem clear your browser's cache of that site. This depends on what browser you are using but I am sure you are more than capable of figuring it out through Google if you have to.