Mobile / Ipad layout image issues

Hi,

I'm attaching a copule of images to explain better some layout issues:

1. As you can see a couple of images at http://fluye.co/acerca-de-fluye, their sizes are not adjusted according with the device. (image Issue #1).

2. As you can see at http://fluye.co/agile-inbound-marketing, there is a layout issue with the "numblock" class and the left image. (image Issue #2).

I'm using the next html code:

<img src="images/inbound_marketing/fluye-inbound-marketing-metodologia.png" alt="fluye - Metodología Inbound Marketing en el Ciclo de Ventas" class="pull-left" title="Metodología Inbound Marketing"/>
<p>Desde la <strong>Perspectiva del VENDEDOR</strong> acorde a la metodología de INBOUND MARKETING el recorrido del comprador es el siguiente:</p>
<p class="numblock"><span>1</span><strong>Atraer:</strong> Creando excelentes contenidos que satisfagan, respondan a la necesidad del comprador.</p>
<p class="numblock"><span>2</span><strong>Convertir:</strong> Promoviendo "llamados de acción (CTA)" que motiven al comprador a adquirir la propuesta de valor.</p>
<p class="numblock"><span>3</span><strong>Cerrar:</strong> Satisfaciendo al comprador con los beneficios ofrecidos por la Propuesta de Valor.</p>
<p class="numblock"><span>4</span><strong>Disfrutar:</strong> Ofreciéndole al comprador una excelente experiencia con el producto / servicio adquirido.</p>

Thanks for your help,

dp

Hi

1. Add this to override.css and make sure override is enabled in template settings:

Code: Select all

#gkMainbody img {
max-width: 100%;
}


2. This is a litle bit more complicated. It's not layout flaw, but how html works like with "float:left" elements. Easiest would be to adda margin to list:

Code: Select all

.numblock {
    margin: 0 0 24px 335px;
}


but only if .numblock was used in this one place on Your site You may need to add an extra class to separate it.

Hi,

1. Working perfect, thanks!

2. It looks perfect in desktop, but please look at it in smartphone http://fluye.co/agile-inbound-marketing

Note: As you suggested, I created a new class in the override file (I took the code from template.css and I just changed the margin line):

/* Inbound Marketing Article */

.numblock-fluye {
color: #111;
font-weight: 400;
margin: 0 0 24px 335px;
min-height: 48px;
padding: 0 0 0 62px !important;
position: relative;
}

.numblock-fluye span {
border: 1px solid #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
font-size: 13px;
font-weight: bold;
height: 36px;
left: 0;
line-height: 36px;
position: absolute;
text-align: center;
top: 2px;
width: 36px;
}

Thanks for your help,

Hi

Very nice. Just add this to override.css

Code: Select all

@media only screen and (max-width:699px) {
.numblock-fluye {
    margin: 0 0 24px;
}

.pull-left {
    display: block;
    float: none;
    margin: 0 auto !important;
}
}


Hello,

Excellent, Thanks!

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro