Is laravel haveing a problem with my css scrolling class?

Posted 3 years ago by raygun

I am trying to use a horizantal scroll on my home page and it's not working correctly. I am also using bootstrap. But I don't think that's whats causing the issue. Instead of scrolling it looks like it's stacked on top of each other.

heres my code in the view

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">


            {{-- The Posts ------------------------------------------------------------------}}


            <div style="background-color:red"><h1>News</h1></div>
            @if ($posts->count())

            <div class="scroll">
                @foreach ($posts as $post)
                    <div class="post-preview" id="box">
                        <a href="{{ $post->url($tag) }}">
                            <h2 class="post-title">{{ $post->title }}</h2>
                            @if ($post->subtitle)
                                <h3 class="post-subtitle">{{ $post->subtitle }}</h3>
                            @endif
                        </a>
                        <p class="post-meta">
                            Posted on {{ $post->published_at->format('F j, Y') }}
                            @if ($post->tags->count())
                                in
                                {!! join(', ', $post->tagLinks()) !!}
                            @endif
                        </p>
                        <hr>
                    </div>
                @endforeach

            @else
                <h1 style="text-align: center">no posts match your search</h1>
            @endif
        </div>

            {{-- End Posts ------------------------------------------------------------------}}





            {{-- The Videos --}}
            <div style="background-color:red"><h1>Videos</h1></div>
            @if ($videos->count())

                <!--<h2>{{ ($videos->count()) }} Articles</h2>  displays count-->

                @foreach ($videos as $video)
                    <div class="post-preview">
                        <a href="{{ $video->url($tag) }}">
                            <h2 class="post-title">{{ $video->title }}</h2>
                            @if ($video->subtitle)
                                <h3 class="post-subtitle">{{ str_limit($video->subtitle, 20) }}</h3>
                            @endif
                        </a>
                        <p class="post-meta">
                            Posted on {{ $video->published_at->format('F j, Y') }}
                            @if ($video->tags->count())
                                in
                                {!! join(', ', $video->tagLinks()) !!}
                            @endif
                        </p>
                    </div>
                    <hr>
                @endforeach

            @else
                <h1 style="text-align: center">no videos match your search</h1>
            @endif
            {{-- End videos --}}



            {{--  {!! $videos->render() !!} --}}

            {{-- The Pager --}}

        </div>

    </div>
</div>
@stop

and heres the css:

#box {
    width: 243px;
    height: 100%;
    margin: 0 4px 5px 0;
    padding:0;
    border-style: solid;
    border-width: 1px;
    /* border-radius: 10px; */
    display: inline-block;

}


.scroll {
    width: 100%;
    padding: 10px 0;
    height: 202px;
    overflow-x: auto;
    overflow-y: hidden;
    /* border: 1px solid; */
    white-space: nowrap;
}

any help with this will be appreciated. I've used this code in another site and it worked

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.