Saludos a todos:
Estoy con la remodelación de mi web y tengo un problema con los CSS de una de las secciones.
Supongo que recordáis que me decante por utilizar Grav como CMS, estoy trabajando sobre la plantilla Deliver, prácticamente ningún cambio excepto alguna pequeña adaptación en la portada (para incluir de forma automática las últimas entradas del blog) y la sección «sobre mi», que es la que me esta dando problemas.
Mi idea es poner mi foto junto al texto de la descripción, de hecho como la descripción es larga, poner al lado de la foto solo parte de ella y que siga en el cuerpo de la página.
Como Deliver cuenta con varias plantillas modulares me he decidido a adaptar la que más se parece a lo que quiero, y es bottom. Lo he dejado tal que así:
<div class="modular-row bottom {{ page.header.class }}">
{% for button in page.header.buttons %}
<a class="button{% if button.primary %} primary{% endif %}" href="{{ button.url }}">{{ button.text }}</a>
{% endfor %}
{% if page.header.class == 'borderbottom' %}
<hr>
{% endif %}
{% if page.header.services %}
<div class="services">
{% for service in page.header.services %}
<div class="service">
<h4>{{ service.title }}</h4>
<img margin-top=1.5rem width=140 height=180 font-size=6rem float=left src="{{ page.media[service.image].url }}" alt="">
<p>{{ service.desc }}</p>
</div>
{% endfor %}
</div>
{% endif %}
{{ content }}
</div>
Como veis no me he molestado ni en cambiar el nombre de las clases porque creo que no interfieren. Solo he cambiado el orden del <h4>
y he añadido a la fotografía las etiquetas CSS pertinentes.
Pero no funciona, lo que he conseguido es esto:
Grav utiliza Twig como plantilla para las páginas.
Estoy seguro que es una tontería lo que falla, pero mi escaso, casi nulo, conocimiento de CSS me impide solucionarlo.
(Por cierto, no me importaría que quedara a doble columna, queda bien.)
¿Alguno me arroja luz sobre el asunto?
Gracias.
Salud y Revolución.
Lobo.