Member Avatar for davy_yg

Cek this code :

@section('content')
<div id="page"> <div class="container"> <section id="container" v-show="visiblePage"> <div class="row"> <div class="col-sm-4"> <img src="{{url('')}}/images/binder.png"> </div> <div class="col-sm-4" style="background-color: #f8f8f8; height: auto;"> <br> <ul class="b">
            @foreach( $pages as $p) 

            <li><a href="{{url('')}}/home/pages/{{ $p->id }}">{{ $p->pages_name }}</a><br>                                           
            @endforeach
            </ul> </div> <div class="col-sm-4" style="background-color: white; height: auto;"> <center><b>{{ $pages2->pages_title }}</b></center><br> 

            {!! $pages2->pages_content !!}

        </div> </section> </div>    

@endsection

I expect that the height will be 600px on "pc only" and auto on mobile, but how?

<div class="col-sm-4" style="background-color: #f8f8f8; height: auto;">

Right now, it adjust the color according to the text which makes the colorful container looks shrink.

  • 2 Contributors
  • 1 Reply
  • 345 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for gentlemedia

Where is that height: 600px declaration for 'PC only'? In an external stylesheet or in the <head>? Why on earth are you using inline styles??? It's bad practice, so don't do it!!!
That inline height: autowill override any height declarations for that div that are set in an external stylesheet or in between <style> tags in the <head>, because of its high specificity. Only a declaration with an !importantadded is higher and therefore stronger then an inline style declaration.

That said... what you see now is exactly what you should see with that height: auto set as inline style on that div. Now the content (your text) dictates the height of that div.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.