CODEWITHSUNDEEP
phphtmlcsslaravel
Schavcovsky
Schavcovsky

Reputation: 81

Laravel not loading CSS properly

I'm having issues when trying to load some properties of my main.css file, loading the file from /user_create.html loads the main.css just fine, but when I try to do it from url.dev/user/create, it doesn't load all the properties, and the code is copy/pasted from html to my blade.php file.

HTML

<div class="container-fluid band-user-creation">
    <div class="container">
    <div class="row">
        <div class="col-lg-12">
          <div class="row">
               <div class="col-lg-4"></div>
               <div class="col-lg-4 raleway-regular"><table >
              <tbody>                   
                ...
                <tr>
                  <td><input name="UserName" type="name" class="input-user-creation" placeholder="Ingresa tu Nombre"></td>
                </tr>
                <tr>
                  <td><input name="UserLastName" type="lastname" class="input-user-creation" placeholder="Ingresa tu Apellido"></td>
                </tr>
                ...

CSS

.band-user-creation{
padding-top: 100px;
padding-bottom: 100px;
color: #212121;
text-align: center;
}

.input-user-creation{
background-color: #B2DD4C;
font-size: x-large;
border-radius: 10px;
padding-left: 10px;
border: transparent;
color: #F9F9F9;
margin-top: 5px;
min-width: 300px;
}

enter image description here

.HTML HEAD CONTENT

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400i,600,600i" rel="stylesheet">

...

...

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
  <![endif]-->
</head>

EDIT

.BLADE HEAD CONTENT

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<link href="../../main.css" rel="stylesheet" type="text/css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400i,600,600i" rel="stylesheet">  

...

...

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>

Upvotes: 1

Views: 5800

Answers (3)

abubakkar tahir
abubakkar tahir

Reputation: 847

the main idea about loading CSS/js use asset() helper

for example

<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome- 
    free/css/all.min.css') }}">

Upvotes: 0

AgeValed
AgeValed

Reputation: 453

you need a layout blade blank.blade.php (folder resources\views\layouts) with

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <link href="{{ asset("css/style.css") }}" rel="stylesheet">
    </head>
    <body 
        @yield('main_container')
    </body>
</html>

then you need your style .css with all the css on inside public folder then on your .blade.php

@extends('layouts.blank')
@section('main_container')
    <!-- ALL THE HTML -->
@endsection

Upvotes: 1

Schavcovsky
Schavcovsky

Reputation: 81

Moving ../main.css to ../css/main.css did the trick, I don't why still kinda work before when It shouldn't...

Upvotes: 0

Related Questions