I have cloned a project from Git on my laptop. After the installation of all the requirements, while running the server I found out that a page is not rendered correctly, therefore I can't see the body. More precisely the body is not shown on the webpage. Does anyone know why this happened?
This is the code:
{% block content %}
<section id="consultanta_totala">
<div class="pricing_div" id="consultanta">
<div class="container" id="container_consultanta" >
<div class="row" id="text1">
<div class="col-xs-12 offset-xs-0 col-sm-10 offset-sm-1 risk_management">
<br><br>
<h4> Risk management </h4>
<p> • Crearea structurii de securitate a firmei Dvs.</p>
<p>• Verificarea antecedentelor penale ale angajatilor</p>
<p>• Verificarea compatibilitatii angajatilor</p>
<p>• Verificare loialitatii angajatilor</p>
<p>• Norme interne de protectie a firmelor</p>
<p>• Profiling</p>
</div>
<br>
</div>
<br>
<div class="row">
<div class=" col-xs-12 offset-xs-0 col-sm-10 offset-sm-1 verificare">
<h4>Verificarea partenerilor de afaceri</h4>
<p> Din punct de vedere al:</p>
<p>• Solvabilitatii si seriozitatii persoanei</p>
<p>• Corectitudinii obligatiilor contractuale</p>
<p>• Intentiilor reale si ale concurentei neloiale</p>
<br>
<br>
</div>
</div>
</div>
</div>
</section>
{% include 'navbar_bottom.html' %}
{% endblock %}
PS before posting the item on git it worked properly.
Thank you!
I got the error because the page didn't had the {% load staticfiles %} variable. Thank you for your help!
Related
I try to change cards face up with a radio button a bit like on this link:
https://codyhouse.co/demo/pricing-tables/index.html
For the moment I am getting to something when the responsive is below 62 rem (my mobile break point) but the result is not convincing above when the card pair is no longer in column but in row: / the pivot point remains central and suddenly the rotation will not be the same ... In fact, I would like the pivot points to always be on the cards that they pass in column or in row
So here is the code (mobile first)
Another problem with this code is that with absolute positions, it breaks my code a bit and suddenly from the "flap" div the elements are no longer in the "flip" section, which generates faults in my base code, especially for my footer ... So I would like to know how I can do to keep the "absolute" positions which make the elements turn, while keeping a well-constructed page with my card part and under my footer
Thank you in advance :)
HTML
<form>
<div class="radio-group">
<input type="radio" id="option-one" name="selector" checked><label for="option-one">Mensuel</label><input type="radio" id="option-two" name="selector"><label for="option-two">Annuel</label>
</div>
</form>
<section class='flip abo'>
<div id='flap' class='flap'>
<div class="recto">
<div class="card">
<h4 class='title-free'>Freelance</h4>
<div class='prix'>
<p>€</p>
<p class='free'><span>5</span>/mois</p>
</div>
<p class='bg-card'>1 utilisateur</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
<div class="card">
<h4 class='title-team'>Team</h4>
<div class='prix'>
<p>€</p>
<p class='team'>à partir de <span>9</span>/mois</p>
</div>
<p class='bg-card'>2 à 150 utilisateurs</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
</div>
<div class="verso">
<div class="card">
<h4 class='title-free'>Freelance</h4>
<div class='prix'>
<p>€</p>
<p class='free'><span>55</span>/ans</p>
</div>
<p class='bg-card'>1 utilisateur</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
<div class="card">
<h4 class='title-team'>Team</h4>
<div class='prix'>
<p>€</p>
<p class='team'>à partir de <span>99</span>/ans</p>
</div>
<p class='bg-card'>2 à 150 utilisateurs</p>
<p>Invités illimités</p>
<p class='bg-card'>Projets illimités</p>
<p>Un tableau Kanban/projet</p>
<p class='bg-card'>Tâches illimitées</p>
<p>Paiement des factures en ligne</p>
<p class='bg-card'>Support 5j/7</p>
</div>
</div>
</div>
</section>
I have a Jekyll website deployed on netlify and I use CloudCannon to make a "template" of my site. I followed this tutorial but when I add class="editable" the visual editor doesn't let me save the changes when I change any of the text (The save button is disabled). This doesn't happen when I update the title of the page in the right panel for example.
This is how the page is shown:
And this is the code of it (I have the header and footer in a default.html layout):
---
layout: default
title: Inicio
permalink: /
---
<header>
<div class="header-content editable">
<div class="header-content-inner editable">
<h1 class="editable">
Esta es la página de inicio del portal de jekyll y liquid
</h1>
<hr />
<p class="editable">
Este sitio web es un ejemplo del uso de jekyll 😃
</p>
<a class="editable btn btn-primary btn-xl page-scroll" href="/about.html">¿Quieres saber más?</a>
</div>
</div>
</header>
<aside class="bg-dark">
<div class="container text-center editable">
<div class="call-to-action editable">
<h2 class="editable">
¿Quieres ver lo que te ofrecemos? 😀
</h2>
<a class="editable btn btn-default btn-xl wow tada" href="/services.html">Mira nuestros servicios</a>
</div>
</div>
</aside>
I added the class="editable" into every tag attempting to make it work because the class was working nowhere.
I cannot provide the site.
You have nesting divs that contain the editable class. That causes an error. Remove all editable classes and add just one on a single h2. That will fix your problem.
I have a small problem of CSS and I do not understand where it can come ... I would like to display 3 images per lines under which I can come out of my info base. But nothing goes as planned. Could someone unblock me? I do not know where I made my mistake.
My code :
{% extends 'index.html.twig' %}
{% block body %}
<div id="startchange">
<div class="portfolio-item">
<section id="objets">
<div class ="title">
<p class="titre">List client</p>
</div>
<div class="row">
{% for client in clients%}
<div class="col-xs-4 col-sm-3 col-md-3">
<img class="img-responsive img-circle" src="img/logos/mario.png">
<div class="description">
<p class="nom"> Surname : </p>
<p class="type"> {{client.surname}}</p>
<p class="nom"> First name : </p>
<p class="type"> {{client.firstname}}</p>
</div>
</div>
{%endfor%}
</div>
</section>
</div>
</div>
{% endblock %}
The view with 4 objects :
List of 4 objects
The view with 0 object : 0 object
It seems that all the objects go in the same square of the line and not in 4 different boxes I do not understand why ... An idea?
I have been trying to make two panels(boxes) the same size, no matter how long is the text inside them. I have realised that on my computer the two boxes are aligned, but on my laptop they aren't.
Here's how the page looks like on my laptop:
The code :
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Bine aţi venit la ATLmath!
</h1>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-book"></i> Probleme rezolvate</h4>
</div>
<div class="panel-body">
<p>Puteţi găsi modele de probleme rezolvate, împreuna cu explicaţii si desene pentru a asigura fixarea cunoştinţelor. Problemele rezolvate sunt grupate in două categorii:</p>
<ul>
<li>Probleme de geometrie</li>
<li>Probleme de algebră</li>
</ul>
Probleme
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-ok"></i> Probleme de testare a cunoştinţelor</h4>
</div>
<div class="panel-body">
<p>Testele de evaluare vor testa capacitatea elevilor de a rezolva probleme similare cu cele din categoria "Probleme rezolvate". Şi aici, problemele vor fi grupate in două categorii:</p>
<ul>
<li>Probleme de geometrie</li>
<li>Probleme de algebră</li>
</ul>
Teste
</div>
</div>
</div>
</div>
I was wondering how I can make them the same height. I've searched this on google and I couldn't do anything good.
EDIT: I would like it to look like this on every device
You can achieve this by using min-width: ; and min-height: ; you can specify a minimal amount of pixels needed for the box using this, this will also prevent your website from deforming when using a different laptop/pc (screen sizes differ on each) and if you don't want it to get bigger either, you can also replace the min with max as statements too
You fix your problem using class "row-eq-height" it's a bootstrap default css for using maintain equal height of multiple columns into a row. You must check the html structure on my demo becoz i changed the structure little bit.
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Bine aţi venit la ATLmath!
</h1>
</div>
</div> .........cont..
http://codepen.io/inewton/pen/rrRwAw
This is a code snippet located in default.html, where it is located in the master folder of the repository.
<body>
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<img src="{{ site.avatar }}" />
<div class="site-info">
<h1 class="site-name">{{ site.name }}</h1>
<p class="site-description">{{ site.description }}</p>
</div>
<nav>
<!-- Test -->
Blog
About
</nav>
</header>
</div>
</div>
<div id="main" role="main" class="container">
{{ content }}
</div>
<div class="wrapper-footer">
<div class="container">
<footer class="footer">
{% include svg-icons.html %}
</footer>
</div>
</div>
{% include analytics.html %}
</body>
As you can see, there's a Liquid tag called {{ content }} in the center <div> tag.
<div id="main" role="main" class="container">
{{ content }}
</div>
I am confused on where that Liquid tag is pointing to. I'm looking around in the tutorial here, but it didn't say anything about {{ content }}, what it does, and how it is used.
Could anyone tell me about this, and if possible, where can I find more info on {{ content }} and how it should be used? Thanks in advance.
This is the content of a page or post or of another layout.
eg :
index.html content is directly injected in _layouts/default.html
about.md is injected in _layouts/page.html with itself is injected in _layouts/default.html
Just read the page/post front matter variable layout to know which layout is used.