CODEWITHSUNDEEP
htmlcsslaraveltwitter-bootstrapbootstrap-4
SecretIndividual
SecretIndividual

Reputation: 2529

Content in nav menu is pushed to the left

I am trying to build my first project using Laravel, using blade and Bootstrap as a HTML/CSS framework.

I am having some difficulties figuring out what is causing an annoying bug. I have several pages that include the nav menu. ONLY on the index page the content of the nav menu is pressed to the left.

I found out what code parts cause this issue but I can't figure out what I am doing wrong.

This is what happens: enter image description here On the index page the entire content of the navbar is pressed to the left a few pixels.

The full code for the index page is:

@extends('layouts.app')

@section('content')
  <h1>New Blog Posts</h1>
  @if(count($posts) > 0)
    @foreach($posts as $post)
      <!-- bouw een entry -->
      <div class="card mb-2">
        <div class="card-body">
          <div class="row">
            <div class="col-md-4 text-center">
              <img class="img-fluid px-2 py-2" style="max-height:250px;" src="/storage/cover_images/{{ $post->cover_image }}">
            </div>
            <div class="col-md-8 p-1">
              <h3><a href="/posts/{{ $post->id }}">{{ $post->title }}</a></h3>
              {!! substr($post->body, 0, 500).'...   ' !!}<a href="/posts/{{ $post->id }}">Read on</a>
              <small>Written on {{ $post->created_at }} by {{ $post->user->name }}</small>
            </div>
          </div>
        </div>
      </div>
    @endforeach
    <div class="row d-flex justify-content-center">
        {{ $posts->links() }}
    </div>
  @else
    <p>No posts found.</p>
  @endif
@endsection

The 2 lines that both cause the problem are:

<img class="img-fluid px-2 py-2" style="max-height:250px;" src="/storage/cover_images/{{ $post->cover_image }}">

and

{!! substr($post->body, 0, 500).'...   ' !!}<a href="/posts/{{ $post->id }}">Read on</a>

Upvotes: 0

Views: 64

Answers (2)

SecretIndividual
SecretIndividual

Reputation: 2529

I am guessing more people have ran into this during their learning path. Whether or not due to sitting behind their computer for too long.

I overlooked the page length. The length of the index page was larger than the screen height (this did not apply to the other pages), resulting in a scroll-bar appearing.

Adding the scroll-bar, to force it on every page, to the body tag in my CSS solved the issue.

body {
    overflow-y:scroll;
}

Upvotes: 0

Walter Garcia
Walter Garcia

Reputation: 21

Have you tried like this?

<a href="{{ url('/posts/' . $post->id) }}">Read on</a>

And like this for your image?

<img src="{{ asset('storage/cover_images/' . $post->cover_image) }}" />

Please, can you provide the error messages?

Upvotes: 1

Related Questions