Dear Stackoverflow community. I have for a while now been struggling with my static files during development in my Django project. The problem is mainly that my stylesheets are sometimes working and sometimes not. Example - my base.html's stylesheet base_style.css is always loading, but when I add a stylesheet for the file home.html which I have loaded through the jinja template tags It sometimes works and sometimes not, the same goes for my other views.
Using python3 and Django 1.11.5
Here is my settings file (Static) =
STATIC_URL = '/static/'
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
Here is my template Base.html =
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicons/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicons/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicons/favicon-16x16.png' %}">
<link rel="manifest" href="{% static 'img/favicons/manifest.json' %}">
<link rel="mask-icon" href="{% static 'img/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>Leaf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link rel="stylesheet" href="{% static 'mainapp/base_style.css' %}" type="text/css" />
</head>
<body>
<!-- NAVBAR -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light navbar-custom text-uppercase">
<img src="{% static 'img/logo.png' %}" width="55" height="75" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-stretch" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Hem<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link py-md-2" href="{% url 'list' %}">Blog</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Story</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
</div>
{% block content %}
{% endblock content %}
<!-- FOOTER -->
<footer class="footer-bs">
<div class="row">
<div class="col-sm-6 footer-brand animated fadeInLeft">
<h2>LEAF</h2>
<p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
<p>© 2017, All rights reserved</p>
</div>
<div class="col-sm-3 footer-nav animated fadeInUp">
<h4>— Menu —</h4>
<ul class="list">
<li>About Us</li>
<li>Contact</li>
<li>Copyright</li>
<li>Example</li>
</ul>
</div>
<div class="col-sm-3 footer-social animated fadeInDown">
<h4>Follow Us</h4>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>RSS</li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Here is my home.html file =
{% extends 'base.html' %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/style_home.css' %}" type="text/css" />[enter image description here][1]
<div class="block text-center my-block">
<h1 class="header-1">Leaf</h1>
<h4 class="header-4">A genuinly healthy all natural energy drink</h4>
<img src="{% static 'img/slide-one.jpg' %}" class="img-fluid" >
</div>
<!-- START CAROUSEL -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item myCarousel active">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="First slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Man-face-one.jpeg' %}" >
<h3 class="review-caption">"I love how it tastes so fresh"</h3>
<p class="name-caption">Mathias</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Second slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Man-face-two.jpeg' %}" >
<h3 class="review-caption">"This is the best ive drinken"</h3>
<p class="name-caption">Eric</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Third slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Woman-face-one.jpeg' %}" >
<h3 class="review-caption">"I wish this product came out years ago!"</h3>
<p class="name-caption">Rebecca</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Fourth slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Man-face-three.jpeg' %}" >
<h3 class="review-caption">"I Which i could drink it all the time"</h3>
<p class="name-caption">Jake</p>
</div>
</div>
<div class="carousel-item myCarousel">
<img class="d-block img-fluid" src="{% static 'img/white-background.gif' %}" alt="Fourth slide" style="max-height: 300px; width: 100%; display: block; ">
<div class="carousel-caption">
<img class="img-circle img-fluid" src="{% static 'img/Woman-face-two.jpeg' %}" >
<h3 class="review-caption">"I Which i could drink it all the time"</h3>
<p class="name-caption">Anna</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END CAROUSEL -->
<div class="container">
<div class="row">
<div class="col">
<img src="{% static 'img/single-can.png' %}" alt="Leaf" class="img-fluid">
</div>
<div class="col">
<div class="myText" align="center">
<h1>Leaf</h1>
<p>"En Genuint Hälsosam, Helt Naturlig Energidryck"</p>
<button type="button" class="btn btn-outline-success">Mer info</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row align-items-center" style="margin-left: 110px;">
<div class="col">
<img src="{% static 'img/middle-section-1.jpg' %}" class="img-fluid" style="max-height: 200px; width: auto;" />
</div>
<div class="col">
<img src="{% static 'img/middle-section-3.png' %}" class="img-fluid" style="max-height: 170px; width: auto;" />
</div>
<div class="col">
<img src="{% static 'img/middle-section-2.png' %}" class="img-fluid" style="max-height: 155px; width: auto;" />
</div>
</div>
</div>
{% endblock content %}
Folder Structure!
(Tried to include a picture of my folder structure on here)
I really hope anyone would be able to help me with this, this is my first post on here and I am quite new at coding.
Related
I am facing issues displaying images in my flask app. below is my code use
This is my main.py
from flask import Flask, render_template, request, session, redirect, flash
from flask_sqlalchemy import SQLAlchemy
from werkzeug.utils import secure_filename
import boto3
local_server = True
app = Flask(__name__)
app.secret_key = 'super-secret-key'
s3 = boto3.client('s3',
aws_access_key_id=os.environ.get('AWS_ACCESS_KEY_ID'),
aws_secret_access_key= os.environ.get('AWS_SECRET_ACCESS_KEY'),
)
BUCKET_NAME='my s3 bucket name'
#app.route("/")
def home():
posts = Posts.query.filter_by().all()
last = math.ceil(len(posts)/int(params['no_of_posts']))
#[0: params['no_of_posts']]
#posts = posts[]
page = request.args.get('page')
if(not str(page).isnumeric()):
page = 1
page= int(page)
posts = posts[(page-1)*int(params['no_of_posts']): (page-1)*int(params['no_of_posts'])+ int(params['no_of_posts'])]
#Pagination Logic
#First
if (page==1):
prev = "#"
next = "/?page="+ str(page+1)
elif(page==last):
prev = "/?page=" + str(page - 1)
next = "#"
else:
prev = "/?page=" + str(page - 1)
next = "/?page=" + str(page + 1)
return render_template('index.html', params=params, posts=posts, prev=prev, next=next)
app.run(debug=True)
this is my html template
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{{params['blog_name']}}</title>
<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{{ url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='css/clean-blog.min.css') }}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="/">{{params['blog_name']}}</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
{% block body %} {% endblock %}
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="{{params['tw_url']}}" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="{{params['fb_url']}}" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="{{params['gh_url']}}" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © TheFlaskBlogger 2021</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Custom scripts for this template -->
<script src="{{ url_for('static', filename='js/clean-blog.min.js') }}"></script>
</body>
</html>
This is one of my page
index.html
{% extends "layout.html" %}
{% block body %}
<!-- Page Header -->
<header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/home-bg.jpg') }}')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>{{params['blog_name']}}</h1>
<span class="subheading">{{params['tag_line']}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{% for post in posts %}
<div class="post-preview">
<a href="/post/{{post.slug}}">
<h2 class="post-title">{{ post.title }}
</h2>
</a>
<p class="post-meta">Posted by
Admin
on {{post.date}}</p>
</div>
{{post.content[0:143]}}
<hr>
</li></a>
{% endfor %}
<!-- Pager -->
<div class="clearfix">
<a style="border-radius: 12px;" class="btn btn-primary float-left" href="{{prev}}"> ← Previous</a>
<a style="border-radius: 12px;" class="btn btn-primary float-right" href="{{next}}">Next →</a>
</div>
</div>
</div>
</div>
{% endblock %}
Please help me display the images from my amazon s3 bucket.I tried all the methods but got no success in displaying images from my S3 bucket. Also note my final outcome is to add the flask application to heroku.
I have tried to get this navbar-brand item centered on the navbar but nothing has worked so far. Can someone help?
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'a_better_place:home' %}">
A Better Place
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
I am using bootstrap framework
The answer above works but it's setting only margins to left
the best option is to use .mx-auto sets margin on left and right of the horizontal axis
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-4"></div>
<div class="col-4 text-center">
<a class="navbar-brand" href="#">
A Better Place
</a>
</div>
<div class="col-4 collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Contact
</a>
</li>
</ul>
</div>
</nav>
Make use of row and col class:
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-4"></div>
<div class="col-4 text-center">
<a class="navbar-brand" href="{% url 'a_better_place:home' %}">
A Better Place
</a>
</div>
<div class="col-4 collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
I can't seem to find the problem in header.html which is leading to
RecursionError: maximum recursion depth exceeded while calling a Python object
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<body>
{% include 'header.html' %}
{% include 'navbar.html' %}
{% include 'dashboard.html' %}
<div class="container-fluid">
{% block content %}
{% endblock %}
</div>
{% include 'footer.html' %}
</body>
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</html>
dashboard.html:
{% load static %}
{% extends 'base.html' %}
<head>
<title>:: Welcome to CrmNXT ::</title>
<!-- Custom fonts for this template-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-address-card"></i>
</div>
<div class="sidebar-brand-text mx-3">Welcome to NexCRM</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Companies -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-building"></i>
<span>Companies</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!--Nav Item - Modules -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-cog"></i>
<span>Modules</span>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</a>
</li>
<!--Nav Item - Pricing -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-money"></i>
<span>Pricing</span>
</a>
</li>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div id="content">
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
{% block script %} {% endblock script %}
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Date Time Picker JS -->
<script src="{% static 'date-time-phone/jquery-ui.js' %}"></script>
<script src="{% static 'date-time-phone/jquery-ui-timepicker-addon.js' %}"></script>
<script>
$( function() {
// $( "#id_birth_date" ).datetimepicker({ dateFormat: 'yy-mm-dd', maxDate: 0, controlType: 'select'}).attr("autocomplete", "off") ;
$( "#id_birth_date" ).timepicker({ dateFormat: 'yy-mm-dd', maxDate: 0, controlType: 'select'}).attr("autocomplete", "off") ;
// $( "#id_birth_date" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr("autocomplete", "off") ;
});
</script>
<!-- Date Time Picker JS -->
<!-- Phone Mask JS -->
<script src="{% static 'date-time-phone/jquery-input-mask-phone-number.min.js' %}"></script>
<script>
//(xxx) xxx-xxxx format code
$(document).ready(function () {
$('#id_phone_number').usPhoneFormat({
format: '(xxx) xxx-xxxx',
});
});
</script>
</body>
</html>
navbar.html:
{% load static %}
{% extends 'base.html' %}
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-address-card"></i>
</div>
<div class="sidebar-brand-text mx-3">Welcome to CRMNXT</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Companies -->
<li class="nav-item">
<a class="nav-link" href="">
<i class="fas fa-fw fa-building"></i>
<span>Companies</span></a>
</li>
<!-- Nav Item - Contact -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-table"></i>
<span>Modules</span></a>
</li>
<!-- Nav Item - Deals -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-user"></i>
<span>Pricing</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
footer.html:
{% load static %}
{% extends 'base.html' %}
<!DOCTYPE html>
<html lang="en">
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © XXXX 2019</span>
</div>
</div>
</footer>
<!-- End of Footer -->
header.html:
{% extends 'base.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small"><strong>Welcome,</strong> {{user.username}}</span>
<img class="img-profile rounded-circle" src="{{user.profile.profile_image.url}}">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Change Password
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'login' %}" >
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
The error that is showing up during template rendering.
Does anyone have a workaround solution for this? Or do I need to increase the recursion limit? And if so, how?
Edit: Forgot to add header.html. Now added in the question.
Your base.html includes header.html, and your header.html extends base.html, causing an infinite loop.
You should choose one or the other. For this case you'd probably want to keep the {% include ... %}.
`
.testimonials {background: url('./images/s8.png'); padding:55px 0; overflow:hidden; }
`Am using django 2.1 having a problem in displaying a background image which is styled in my css folder
I have tried several ways like
.testimonials {background: url("/static/images/s8.png"); padding:55px 0; overflow:hidden; }
and having an inline customization both didn't work please help
<div class="testimonials" style="background: url({% static "images/s8.jpg" %})">
Using a background image in CSS file doesn't require a static block. Just make sure you have path correctly matched with your folders. Use ./ to go back in path mapping.
css/base.css
images/slide1Back.png
My CSS file was in CSS folder and images were in the images folder. So I used this.
background-image: url('./images/slide1Back.png');
First of all, make sure you added this line to your html file:
{% load staticfiles %}
then put this to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
now everythings work like what!
UPDATE
Here is my profile.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
</body>
</html>
and my style.css
#subheader.about {
background: url("../images/s8.jpg") center center no-repeat;
padding: 100px 25px;
}
#subheader.about:after {
background: rgba(34, 43, 50, .9);
bottom: 0px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
please attention, i used ../ instead of ./
and this is my tree:
tree
and this is result:
result view
Am using this template here as about.html
{% extends "base.html" %}
{% load static %}
{% block Content %}
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
<!-- DESCRIPTION -->
<div class="about-descr">
<div class="row">
<div class="col-sm-12 col-md-10 center-block">
<h3>WHAT ARE WE ALL ABOUT?</h3>
<div class="titleborder centered">
<div class="titleborder_left"></div>
<div class="titleborder_sign"></div>
<div class="titleborder_right"></div>
</div>
</div>
</div>
<div class="row spacing-25">
<div class="col-sm-12 col-md-7">
<img src="images/about-us.jpg" alt=""/>
</div>
<div class="col-sm-12 col-md-5">
<p class="topspacing">We work hard to provide Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa. </p>
<p>Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa..</p>
</div>
</div>
</div>
<!-- END OF DESCRIPTION -->
<!-- ABOUT ICONS -->
<div class="about-icons">
<div class="row">
<div class="col-sm-3"><img src="images/icon17.png" alt=""/><p>CHOOSE</p></div>
<div class="col-sm-3"><img src="images/icon18.png" alt=""/><p>SCALE</p></div>
<div class="col-sm-3"><img src="images/icon19.png" alt=""/><p>LAUNCH</p></div>
<div class="col-sm-3"><img src="images/icon20.png" alt=""/><p>USE</p></div>
</div>
</div>
<!-- END OF ABOUT ICONS -->
{% endblock Content%}
and this is my css
======================== */
#subheader.about {background: url("../images/s8.jpg") center center no-repeat; padding:100px 25px;}
#subheader.about:after { background: rgba(34,43,50,.9); bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }
Can tell where is the mistake or am missing something here
here is the path to image projects/djangoprojects/static/images/s8.jpg
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content=" ">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>| Web | Software </title>
<link rel="shortcut icon" href="{% static "images/favicon.png" %}" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap & Styles -->
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-theme.min.css" %}" rel="stylesheet">
<link href="{% static "css/block_grid_bootstrap.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/owl.carousel.css" %}">
<link rel="stylesheet" href="{% static "css/owl.theme.css" %}">
<link rel="stylesheet" href="{% static "css/animate-custom.css" %}">
<link rel="stylesheet" href="{% static "css/flexslider.css" %}">
<link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
<link rel="stylesheet" href="{% static "css/slicknav.min.css" %}">
<link href="{% static "css/style.css" %}" rel="stylesheet">
</head>
<body>
<!-- TOP NAV -->
<div class="topmenu">
<div class="row">
<div class="col-sm-3">
<ul class="top left">
<li><i class="fa fa-phone"></i>+666666666 Call us</li>
</ul>
</div>
<div class="col-sm-9">
<ul class="topright">
<li><i class="fa fa-unlock-alt"></i> CLIENT AREA</li>
<li><i class="fa fa-commenting-o"></i> LIVE CHAT</li>
<li><i class="fa fa-hand-pointer-o"></i> Support</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP NAV -->
<!-- HEADER -->
<div class="header">
<div class="row">
<div class="col-sm-3">
<div class="logo">
<a href="/"><img src="{% static "images/logo.png" %}" alt="" />
</a>
</div>
</div>
<div class="col-sm-9">
<nav id="desktop-menu">
<ul class="sf-menu" id="navigation">
<li class="current">Home
<ul>
<li>Billing</li>
<li>Web Design</li>
</ul>
</li>
<li>Hosting
<ul>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
</ul>
</li>
<li>Domains</li>
<li>Pages
<ul>
<li>About</li>
<li>FAQ</li>
<li>Datacenter</li>
</ul>
</li>
<li>Blog
<ul>
<li>hosting tips</li>
<li>Facebook</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- END OF HEADER -->
{% block Content %}
{% endblock Content %}
<!-- FOOTER -->
<div class="footer">
<div class="row">
<div class="col-sm-3">
<h4>CLOUD HOSTING</h4>
<ul>
<li>cPanel Hosting</li>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
<li>WordPress Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>HOSTING FOR APPS</h4>
<ul>
<li>WordPress Hosting</li>
<li>Joomla Hosting</li>
<li>Drupal Hosting</li>
<li>Magento Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>COMPANY</h4>
<ul>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Acceptable Usage Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h4>NEWSLETTER SIGNUP</h4>
<div id="mc_embed_signup">
<form class="form-inline validate material" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input id="mce-EMAIL" type="email" name="EMAIL" placeholder="E-mail" required>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
</div>
<input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="mtr-btn button-blue">
</form>
</div>
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- SOCIAL & COPYRIGHT -->
<div class="social">
<div class="row">
<div class="col-sm-12">
<ul class="social-links">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-pinterest-p"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-github-alt"></i></li>
</ul>
<p class="text-center">Copyright© . All rights reserved.</p>
</div>
</div>
</div>
<!-- END OF SOCIAL & COPYRIGHT -->
<!-- LOGIN MODAL -->
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="LoginModal">
<div class="modal-dialog" role="document">
<form method="post" action="#" class="material">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i>LOGIN TO YOUR ACCOUNT</h4>
</div>
<div class="modal-body">
<input type="text" name="username" placeholder="E-mail Address">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="mtr-btn button-fab">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
<!-- END OF LOGIN MODAL -->
<i class="fa fa-angle-up"></i>
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.flexslider-min.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<script src="{% static "js/hoverIntent.js" %}"></script>
<script src="{% static "js/superfish.min.js" %}"></script>
<script src="{% static "js/owl.carousel.js" %}"></script>
<script src="{% static "js/ripple-effect.js" %}"></script>
<script src="{% static "js/wow.min.js" %}"></script>
<script src="{% static "js/jquery.form.min.js" %}"></script>
<script src="{% static "js/jquery.slicknav.min.js" %}"></script>
<script src="{% static "js/retina.min.js" %}"></script>
<script src="{% static "js/custom.js" %}"></script>
</body>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5933bc17b3d02e11ecc6824e/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</html>
I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.
I am developing this webpage using python/django framework in which my base.html file looks like this
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
I believe the problem resides in my base.html file however here is a sample html of another page that use base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
I am new to web development so any help would me much appreciated.
Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line
.container .page-header { border-bottom: 0px:} which then got rid of this border.
Not sure why the border was there in the first place.
If anyone comes along I hope this helps.