If you look at the screen shot you will see I have 3 in a row but I don't understand why the one on its own I can't make go into a row of 3 this is the code. Thanks to anyone that can help.
<div class="col">
<h2>Tiling Contractors in Shere</h2>
<h2><strong>Shere Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Shere</strong></p>
<p><a href="tiler-in-shere.html">Read More</a></p>
</div>
</div>
<div class="col last">
<h2>Tiling Contractors in Staines</h2>
<h2><strong>Staines Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Staines</strong></p>
<p><a href="tiler-in-staines.html">Read More</a></p>
</div>
</div>
<div class="col">
<h2>Tiling Contractors in Sunbury on Thames</h2>
<h2><strong>Sunbury on Thames Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Sunbury-on-Thames</strong></p>
<p><a href="tiler-in-sunbury-on-thames.html">Read More</a></p>
</div>
</div>
<div class="col">
<h2>Tiling Contractors in Surbition</h2>
<h2><strong>Surbition Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Surbition</strong></p>
<p><a href="tiler-in-Surbition.html">Read More</a></p>
</div>
</div>
<div class="col">
<h2>Tiling Contractors in Tadworth</h2>
<h2><strong>Tadworth Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Tadworth</strong></p>
<p><a href="tiler-in-tadworth.html">Read More</a></p>
</div>
</div>
Attached thumbnail(s)
We would need to see the CSS as well...
Sometimes that happens with floated elements if they get caught by a previous one. Perhaps the browser thinks the Shepperton box extends slightly more (due to its two lines of white text) than the Shere box (that has only one line of white text). If you add a CSS border around the boxes you might be able to confirm this.
The most robust solution might be to use a Flex layout instead of floats. Or possibly give all the .col boxes the same explicit height.
Hi there mattykg1987,
First things first, unfortunately your choice of text and
background colors fails miserably in a contrast test here...
https://webaim.org/resources/contrastchecker/
Unfortunately, some of your visitors may not be blessed with 20/20 vision.
With that in mind your may see a reworking of your page here...
Full Page View
https://codepen.io/coothead/full/wvZGOVy
...and the code for it here...
Editor View
https://codepen.io/coothead/pen/wvZGOVy
The page is also fully responsive for all devices.
First things first, unfortunately your choice of text and
background colors fails miserably in a contrast test here...
https://webaim.org/resources/contrastchecker/
Unfortunately, some of your visitors may not be blessed with 20/20 vision.
With that in mind your may see a reworking of your page here...
Full Page View
https://codepen.io/coothead/full/wvZGOVy
...and the code for it here...
Editor View
https://codepen.io/coothead/pen/wvZGOVy
The page is also fully responsive for all devices.
Thanks for your reply sorry but I'm not sure what's changed, can you explain?
These changes make the page work on all devices and make the content readable for all viewers.
- the background-color has been changed.
- the HTML has been changed - ( simplified ).
- the CSS has been changed.
I hope that this answer will help your understanding.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)