Problemi con lo style.css

Support
1

Buonasera. Sto provando a caricare il mio sito web, ma dopo che viene elaborato da Netlify non viene compreso il file style.css e quindi tutte le dimensioni sono incasinate. Il mio sito è il seguente: https://lambent-choux-b5c536.netlify.app

2

hello, could you try and ask your question in english please? thank you!

3

Hi @Matt5

Il mio italiano non è molto buono. (So I had to translate :sob: )

You have used the <box> HTML element which as far as I know isn’t a valid HTML tag. Remove this element from the page.

Also the <link>, <meta> and <title> elements need to go inside the <head> element i.e.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Bangers&amp;display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <title>Zero Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- fondamentale per il responsive design -->
  <link rel="stylesheet" href="styles.css">
  <script src="js/jquery-1.7.1.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Bangers&amp;display=swap" rel="stylesheet">
</head>

Then the lower section shows:

Screen Shot 2022-06-04 at 7.58.58 am
Screen Shot 2022-06-04 at 7.58.58 am3544×2596 255 KB

1 Like
4

Of course!

I created a site in html using visual studio code and I linked the html.index to a style.css file. When I view the local preview the html adapts following what is written in the style.css, but when I load it on netlify the site does not include the style.css …

5

Don’t worry about Italian.

I tried to do what you told me, but nothing has changed: https://calm-buttercream-fcee4e.netlify.app/

I am also sending you the link of the site folder. If it’s not a problem for you could you edit the files and share them with me? Because I have an expiration date for this site and I can’t solve the problem… sito - Google Drive

Thank you!

6

It works fine for me in Safari and Chrome. Firefox initially stopped the movie loading because autoplay was disabled. Once I enabled autoplay, it played fine.

I suggest adding at minimum a poster image which is displayed while the video is loading and a play/pause button to for when autoplay is disabled by the user.

With your video, it is large at around 20MB. Ideally, for a short video such as your, it wouldn’t exceed more than about 2MB (anything over ~5MB isn’t cached on Netlify’s CDN and is always downloaded from the origin server which will impact performance.) Also look at other formats such as WebM and services such as Cloud Convert or software such as Handbrake.

7

The site is working fine when I view it.
However I can see that all the styling is inline.

It’s failing to load:
/styles.css
/js/jquery-1.7.1.min.js

Checking your files you will find…
You don’t have a /styles.css (you have /style.css)
You don’t have a /js/ folder

If you do want to use a linked stylesheet just pay close attention to the names of your files.

Change:

<link rel="stylesheet" href="styles.css">

To:

<link rel="stylesheet" href="style.css">
8

Thank you very much! It worked!