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.
Related
I don't really know how to explain what is happening. I have an image in my website that is normally showing when I'm editing my html and opening it through chrome (basically when it's not already online!). When I upload the document online the image is not showing anymore. I checked the folder and the connection, but it appears to be okay. Also, other elements from the same folder are working properly. Could you please help me?
this is the code:
<div id="purpleSection" class="row bg-purple fullScreen">
<div class="col-9 offset-3 d-flex align-items-center">
<p class="display-4 mr-2 line-height">Mi chiamo Giulia Giordano e vengo da Palermo. Attualmente sto
frequentando l’ultimo anno dell’Accademia di Belle Arti. Sono una graphic designer, mi occupo di visual
communication, design per l’editoria e videografica. Clicca per saperne di più! </p>
</div>
</div>
<div class="row bg-purple">
<div class="col-12 d-flex justify-content-end mb-5">
<a href="chisono.html" class="mr-5 mt-auto ">
<img src="scopridipiu/scopridipiù.png" alt="">
</a>
</div>
</div>
You are never closing your img tag, see if closing it helps by adding </img> or />
Also it might be an encoding issue. In this row.
<img src="scopridipiu/scopridipiù.png" alt=""></img>
Try changing your png file to something like scopridipiu.png instead of scopridipiù.png.
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 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!
im working on a project for myself and im stuck at this point:
<div id="opacity">
<div id="content">
<div id="text">
<h1 id="contentH1">Officiele game-rate website.</h1>
<br>
<p id="contentP1">Op deze website kunt u alle top 10 games zien, van veel verschillende genre's. Alle lijsten zijn bedoeld voor de pc. </p>
<p id="contentP2">Hier onder worden de verschillende genre's aangegeven:</p>
<ul id="genreIndeling">
<li>Actie</li>
<li>Avontuur</li>
<li>Strategie</li>
<li>RPG</li>
<li>Sport</li>
<li>Race</li>
</ul>
</div><!--END TEXT-->
</div><!--END OPACITY-->
<div id="messi">
<img id="messi" src="messi.png" alt="Messi" style="opacity: 1;">
</div><!--END MESSI-->
</div><!--END CONTENT-->
Sorry for the Dutch words, but the problem is that my pc, the end div of "content" sees as the end div of "opacity", so my picture got still opacity.
Can anybody help me please?
Thanks,
Joost Keizer
You are missing a closing "/div" for opacity
Swap the ids of your first two divs:
<div id="content">
<div id="opacity">
This will put your divs in order and keep the image the way you want.
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