I’m trying to grid a number of images on a wordpress website, using the twenty thirteen theme.

this is the code i’m using

<style> 
    #fontContainer {
            font-size: 0px; 
            width: 958px; 
            margin: 0 auto;
            padding: 2px; 
            margin-top: 30px;
    } 
#fontContainer {
           font-size: 0px; 
           width: auto; 
           margin: auto;
           padding: 2px; 
 } 
    #frontContainer a { 
        margin: 6px; 
        display: inline-block;
        height: 150px;
        width: 150px; 
        float: left;
}
#frontContainer img { 
        height: 100%; 
        width: 100%; 
        border: 4px solid black;
        border-radius: 10px;
}
 </style>
<div id='frontContainer'>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/BowFrontDesk_pacificexpresscopy_zps7e8dc151.jpg'/></a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/corner_workstationcopy_zps1ff2c6b7.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Corner_work_station_zps644dc92c.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/screen_4person_workstation_zps73078288.jpg'/></a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Counter_reception_01_zps9b4c1fbe.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/home_office_desk_zps5a5737d9.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/chair_mesh_am100_zps582ba090.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/tamboor_cupboard_zps0e8c0f6c.jpg'/></a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Screen_zps64d2ea85.jpg'/> </a>
    </div>

it should be fairly straight forward but on the WP site the top row of images is stepping downwards. I have no idea why or how to fix it.

the website is www.pacificexpress.com.au

if anyone could help it will be greatly appreciated.

James

Read more here: Problems with basic image grid on WordPress twenty-thirteen theme


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , ,

Wordpress related questions and answers: