Issues with Css custom properties on certain webhosting platforms

Seeking assistance with a CSS custom properties issue.

Recently purchased a web hosting service from Hostinger and using the default Wordpress template.

Our web designer created a website in teleporthq.io, exported the files as HTML and CSS.

Deleted the entire public_html folder, created an empty public_html folder, and placed all the exported files inside, with the main page as index.html.

Although the page loads, the webpage's style is not correct. After further inspection, it seems the CSS Custom Properties are not loading, causing the page to look different.

When opening the pages locally, they display correctly, leading me to think it could be a setting or application deployed in the web hosting that I missed.

Encountering this error in the CSS file while editing with the web word editor: Expected RBRACE at line 2, col 3.

This is the error encountered in the part that uses the custom property: Expected (<color> | inherit) but found 'var(--dl-color-gray-black)'.

Any suggestions on how to enable CSS Custom Properties on a web hosting platform? (In this case, Hostinger)

:root {  --dl-color-gray-500: #595959; } 
.input { color: var(--dl-color-gray-black);
         cursor: auto;  
         padding: 0.5rem 1rem;
         font-family: Inter;   
         border-color: var(--dl-color-gray-black);   
         border-width: 1px;   
         border-radius: 4px;   
         background-color: var(--dl-color-gray-white); 
 }

Answer №1

It's unusual. Have you tried running tests on various servers to confirm if it's a hosting issue? I suggest doing that initially and also checking the CSS properties on other elements. Additionally, consider using Codepen or JSFiddle to verify that your code is functioning correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the CSS styling of third-party components in different pages using NextJS

When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

What is the solution to the error message "cannot find specified file or directory, lstat 'scss/'"?

I am currently following a tutorial on YouTube here where the instructor is demonstrating how to run an npm script "sass" file using the terminal. When I try executing the command npm run sass, it gives me an error message: Error: ENOENT: no such file o ...

What are the implications of implementing this particular CSS code?

One common thing I come across on websites is this snippet of code: body:before { content: ""; width: 0; height: 100%; float: left; margin-top: -31700px; } What happens when this CSS is implemented? ...

How can I create a menu navigation in Bootstrap 4 similar to the one on the components website

Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...

Options for Repeating and Full Width Custom Headers in WordPress

I have been exploring the WP codex extensively, but without success. I have enabled the customizer custom header and can upload images. I can then set some CSS to choose whether I want it to be full width or repeated. However, I would like to add an option ...

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...

Employing the "div" element to target in CSS styling

I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

Within the configuration file conf.py for Sphinx, I have specified the following: html_css_files = ['css/custom.css'] html_js_files = ['js/custom.js'] However, any alterations made to custom.js or custom.css do not immediately appear i ...

What is the best way to revert the Highcharts bar color back to its default color?

I am currently working with Highcharts version 4.1.10 In my bar chart, I have implemented a feature where the color of the bar changes when its value exceeds a certain threshold. //This function is called at regular intervals by a timeout function myTime ...

How can I position a div in the center of a fullpage.js slide?

I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

Bootstrap's landing page problem

I am currently working on creating a landing page using bootstrap and have encountered an issue with the text alignment in my section containing icons and tags. In order to make the text appear clean and concise, I want the text to be displayed in either o ...

I am looking to enhance my CSS menu by incorporating a sub menu feature

I am having trouble getting my submenu to slide to the right horizontally. I have tried various CSS menus, but they are causing issues with my webpage. Here is the HTML code for the menu: <li class="widget"> <h2>Categories</h2> & ...

Is there a way to showcase the outcome of a Python script on an HTML webpage?

Hey there, I'm a beginner to coding and I've been working on a little project to track the price of gold in a web application using Flask and Python. In my HTML code, I have a button that, when clicked, takes users to a new route where the gold ...

Show button image beyond the limits of the hyperlink

Is it possible to create a button with a background image that changes on hover and when active, while also having the active state display an image that extends beyond the anchor's bounds? Check out my sprite here: The top half of the sprite represe ...

textarea label align: center

I've been struggling to center-align the label for this textarea within the text box, but so far my attempts have failed. The resulting display resembles the following: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx ...

SVG path tooltips are not functioning properly, unlike in regular HTML where they work perfectly

I have a CSS/HTML code that works perfectly in plain HTML and is also shown as an example at the end of the demo. However, it fails to work properly in SVG. Upon inspecting the element, I found that the :after code is being called but the tooltip remains ...

How can I align the kendoMenu in the center when the menu width is unpredictable?

Presenting a modified menu structure: <html class="k-webkit k-webkit40"> <head> <title>Site Title</title> <!-- js and css files referenced here --> </head> <body> <link h ...