Css lost when deploying on Netlify

Support
,
1

Hello!

I am new here, forgive my lack of knowledge, I am doing my best to build a website.

Everything woks fine on local, however when I deploy it to Netlify I lose all the styling, css.
The site is: https://imaginative-lebkuchen-ca0e2b.netlify.app

The site folder is organised like this:

Site folder:

  • Index.html
  • css / bootstrap.min.css
  • assets / img / images

This is the head of the html

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.108.0">
    <title>ciceru</title>

    <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=Josefin+Slab&display=swap" rel="stylesheet">

    <link href="../ciceru/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="../ciceru/css/heroes.css" rel="stylesheet">
    <link href="../ciceru/css/carousel.css" rel="stylesheet">
    <link href="../ciceru/css/headers.css" rel="stylesheet">

  </head>

Any help please? I tried already to reorganise the folder, and clean up the html head (also tried to delete all other css files and custom styiling), and again, locally it picks up the styiling, when deploying all is lost.

Thank you in advance :pray:

2

HI @vinofilo, thanks for posting and welcome to the Netlify support forums.

Kindly replace the link tag currently in your html below

link href="../ciceru/css/bootstrap.min.css" rel="stylesheet">

to

<link href="/css/bootstrap.min.css" rel="stylesheet">

Using the path "../ciceru/css/bootstrap.min.css" will not work after deployment because it does not exit.
The css folder is relative to your index.html file.

Let me know the outcome.

Thanks.

1 Like
3

Hey @clarnx, it worked. Thanks so much :pray: also for the super quick help.

1 Like
4

Hi @vinofilo, thanks for the feedback. Glad to know my suggestions helped resolve your problem.