raygun
4 years ago

Is laravel haveing a problem with my css scrolling class?

Posted 4 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.