Problema con CSS

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.

El `float:left;``es tu amigo, aunque también lo odiarás

MiguelAngelLV http://foro.hacklabalmeria.net/u/miguelangellv
29 Agosto

El |float:left;|`es tu amigo, aunque también lo odiarás

Estaba puesto, de hecho he añadido el punto y coma pensando que era el
detalle que indicabas pero no, no cambia.

He subido la primera maqueta a mi alojamiento, por si queréis darle un
vistazo:

http://www.mucharuina.com/sobre-mi

Gracias por intentarlo @MiguelAngelLV.

Salud y Revolución.

Lobo.

Pues debes estar definiendo mal las reglas.

Si lo pongo «a saco» en el Chromium va

Recuerda que debes ponérselo a la imagen y que después tendrás que jugar un poco con el margin-right.

[MiguelAngelLV] MiguelAngelLV
http://foro.hacklabalmeria.net/u/miguelangellv
29 Agosto

Razlobo:

Estaba puesto, de hecho he añadido el punto y coma pensando que era el
detalle que indicabas pero no, no cambia.

Pues debes estar definiendo mal las reglas.

Si lo pongo «a saco» en el Chromium va

Ya veo. :^m

Intentaré replicar eso con Firefox a ver.

Recuerda que debes ponérselo a la imagen y que después tendrás que jugar
un poco con el margin-right.

Esta puesto en la imagen, la diferencia principal que veo es que has
puesto la altura en automática.

Probaré a ver.

Salud y Revolución.

Lobo.

Yo sólo le he puesto el float, lo demás es «de serie»

Resuelto:

No me preguntes porqué pero al encerrar el float dentro de un style ha funcionado:

           <img style="
                float: left; 
                margin-top: 1.5rem;
                margin-right: 1rem;
                font-size: 6rem;"
                width=140 height=auto src="{{ page.media[service.image].url }}" alt=""> 

Lo que no consigo es que el resto del texto se alinee a la izquierda:

<p style="
        text-align:left;
        margin-top: 3rem;
        margin-right: 1rem;"> {{ content }} </p>

Pero me parece ya un mal menor, en cualquier caso el texto tengo que cambiarlo.

Gracias por la ayuda @MiguelAngelLV.

Salud y Revolución.

Lobo.

Resuelto también:

   <div style="
        text-align:left;
        margin-top: 3rem;
        margin-right: 1rem;"> {{ content }} 
    </div>

Ya le voy pillando el truquillo al inspector del navegador.

Moltes graçies.

Salud y Revolución.

Lobo.