Marwane Marwane - 5 months ago 17
CSS Question

CSS doesn't apply

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

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.