How to design this the right way (and responsive!)?


Staff member
I have a <a href="" rel="nofollow noreferrer">column</a> in my Wordpress site with our country image and some text in it.

This is how it's supposed to look in a normal browser, and on a phone:

<img src=" " alt="how it&#39;s supposed to be">

Now, by default <strong>Wordpress</strong> doesn't parse this very well. If I only insert the text and the image in my column, it looks like this:

<img src=" " alt="default wordpress look">

As you can see, the column doesn't get it's required height. My solution is to add a div with a fixed height of 225px. <strong>Then it looks good!</strong> However, the <strong>responsive</strong> is not.

When I resize the window, it looks like this:

<img src=" " alt="responsive">

The image is not resized. The text is all over the place and the column has way too much height.

I have tried <a href="" rel="nofollow noreferrer">this trick</a> to make the image responsive, but that didn't work.

How can I design this the right way, so that it looks great on a normal sized screen and on a mobile?

&lt;div class="fusion-one-half one_half fusion-layout-column fusion-column last spacing-yes"&gt;&lt;div class="fusion-column-wrapper" style="background-color:#ffffff;padding:10px;"&gt;
&lt;p&gt;Lorem Ipsum dolor sit amet.&lt;br&gt;
consetetuer adipiscing elit.&lt;br&gt;
&lt;img class="alignright size-full wp-image-78" src="" alt="landkaart" width="292" height="350"&gt;&amp;nbsp;Aenean commodo ligula&lt;br&gt;
eget dolor. Aenean massa.&lt;br&gt;
Cum soccis natoque&lt;br&gt;
penatibus et agnis dis&lt;br&gt;
parturient montes, nasectur&lt;br&gt;
ridiculus mus.&lt;/p&gt;
&lt;div id="landkaart"&gt;&lt;/div&gt;

#landkaart {
height: 200px;
#landkaart img {

See the jsFiddle for a replicate of my Wordpress column: <a href="" rel="nofollow noreferrer"></a>