1

I'm not too much familiar with the front end development since I've worked as back-end developer. Now, I've a problem with css overriding on my page.

I've following a structure including css files in the master layout.

@section('assets')
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery-ui.css')}}" rel="stylesheet">
    <link href="{{ asset('css/animate.min.css')}}" rel="stylesheet">
    <link href="{{ asset('css/style.css')}}" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
@show()

Whenever the home page is loaded then I have a lot of errors displayed in the console.

Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. font-awesome.min.css:4:662

Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. bootstrap.min.css:7:329

Unknown pseudo-class or pseudo-element ‘-webkit-search-cancel-button’. Ruleset ignored due to bad selector. bootstrap.min.css:7:1619

Unknown property ‘orphans’. Declaration dropped. bootstrap.min.css:7:2379

Unknown property ‘widows’. Declaration dropped. bootstrap.min.css:7:2388

Error in parsing value for ‘outline’. Declaration dropped. bootstrap.min.css:7:3249

Error in parsing value for ‘margin-top’. Declaration dropped. bootstrap.min.css:7:21595

Error in parsing value for ‘outline’. Declaration dropped. bootstrap.min.css:7:21882 ....

As per my knowledge, this is because of conflict of css rules added in files and hence proper ordering of the including css files that master blade needs.

Can anyone provide how to reorder the including css files in above master layout?

Thanks in advance.

2
  • Try like: <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">, <link href="{{ asset('css/animate.min.css')}}" rel="stylesheet">, <link href="{{ asset('css/style.css')}}" rel="stylesheet">, <link href="{{ asset('css/app.css') }}" rel="stylesheet">, <link href="{{ asset('css/jquery-ui.css')}}" rel="stylesheet">, <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">, <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800" rel="stylesheet"> Commented Jan 31, 2018 at 9:18
  • @HirenGohel Still same errors and warnings Commented Jan 31, 2018 at 9:40

1 Answer 1

1

try this

<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
<link href="{{ asset('css/jquery-ui.css')}}" rel="stylesheet">
<link href="{{ asset('css/animate.min.css')}}" rel="stylesheet">
<link href="{{ asset('css/style.css')}}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800" rel="stylesheet">
Sign up to request clarification or add additional context in comments.

4 Comments

@SagarGautam check it line by line i mean leave first 2 line and remove below line of css and check what you are getting if every thing is fine add another line this continue untill all line check . it think error occur becuase of css/style.css and css/app.css
I'll see about this
@SagarGautam if you like my answer upvote it. may it help other
Unfortunately, I still don't find the way to get out of this problem. This error making page loading too much slow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.