Wordpress css loading problems

Question

I downloaded the project from the server to my pc (localhost). Every time I make a change to the css this change is not loaded on the site (localhost).

I tried changing my browser and clear browser cache. I installed the plugin (Autoptimize) to clear the website css cache.

.section_news {
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.section_news .news_content {
    color: red;
    text-align: center;
}

.section_news .news_content .title {
    color: red;
    color: blue;
}

Changes are not visible when I reload the web site. I checked if the code was loaded at all: https://ibb.co/jT7LX6n

Answer 1

What specific class you are styling? This line?

   .section_news .news_content .title {
        color: red;
        color: blue;
    }

It should contain only one color. It is either color: red; or color: blue;

Also, Try to Cmd + Shift + r (on a mac) OR Ctrl + F5 (on windows).

And check if your stylesheet source link has variable like:

<link rel="stylesheet" type="text/css" href="css/stylesheet.css?ver=5.2.2" />

so the changes you have made to your css file doesn't take effect. You may change it from ver=5.2.2 to ver=5.2.3

UPDATE

Your local style sheet was not loading because the url of the website you have downloaded was not changed. The website that you are running locally is still using the style sheet of the live website.

You can choose one of the following solutions.

1. If you are Using Xampp, you can host your domain virtually IF domain is using http only.

Add this Code in C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
 DocumentRoot "C:/xampp/htdocs" //your file path
 ServerName your-domain.com
 ServerAlias www.your-domain.com
 <Directory "c:/xampp/htdocs">
 Order allow,deny
 Allow from all
 </Directory>
</VirtualHost>

Then go to C:\Windows\System32\drivers\etc\hosts then add this line

127.0.0.1  www.your-domain.com

2. OR this way if domain is using https:

How do I use https (SSL) in XAMPP while using virtual hosts

ANOTHER option is to update your URL on your database: Note: make a backup first of your database Change site URL and WordPress URL in Localhost

Or use a plugin like this https://wordpress.org/plugins/velvet-blues-update-urls/

Answer 2

The ?ver=5.2.2 in the CSS reference might cause caching issues for you. This is a parameter that normally is injected by Wordpress if the theme author loads the CSS file with the wp_enqueue_style() function.

As suggested in a similar question, you could try putting a function like this inside your functions.php:

function trim_css_version($src) {
    if (strpos($src, 'ver=')) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'trim_css_version', 9999);

This will hopefully remove the ?ver=x.x.x from your document, and also prevent unwanted browser caching.