I have a <a href="http://jsfiddle.net/7056ewyr/" 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'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="http://wpbeaches.com/make-images-scale-responsive-web-design/" 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?
See the jsFiddle for a replicate of my Wordpress column: <a href="http://jsfiddle.net/7056ewyr/" rel="nofollow noreferrer">http://jsfiddle.net/7056ewyr/</a>
This is how it's supposed to look in a normal browser, and on a phone:
<img src=" " alt="how it'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="http://wpbeaches.com/make-images-scale-responsive-web-design/" 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?
Code:
<div class="fusion-one-half one_half fusion-layout-column fusion-column last spacing-yes"><div class="fusion-column-wrapper" style="background-color:#ffffff;padding:10px;">
<h2>VIND DE BEWINDVOERDER IN UW REGIO</h2>
<p>Lorem Ipsum dolor sit amet.<br>
consetetuer adipiscing elit.<br>
<img class="alignright size-full wp-image-78" src="http://zekerfz.icode4u.nl/wp-content/uploads/2015/02/ZEKERFZ_website_home_home_2_09.png" alt="landkaart" width="292" height="350">&nbsp;Aenean commodo ligula<br>
eget dolor. Aenean massa.<br>
Cum soccis natoque<br>
penatibus et agnis dis<br>
parturient montes, nasectur<br>
ridiculus mus.</p>
<div id="landkaart"></div>
</div></div>
#landkaart {
height: 200px;
}
#landkaart img {
max-width:100%;
}See the jsFiddle for a replicate of my Wordpress column: <a href="http://jsfiddle.net/7056ewyr/" rel="nofollow noreferrer">http://jsfiddle.net/7056ewyr/</a>