Skip to main content
Participant
November 6, 2018
Question

Adding Additional Cells To A Photo Index Page...

  • November 6, 2018
  • 2 replies
  • 279 views

Hello!

I am attempting to add additional cells to a photo index page (www.BigMusicGeek.com -- Your Online Concert Photo Authority!)​, but am unsure of how to do it.  Ideally, I would like to add four more rows of cells to the existing six.

Thanks!

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    November 6, 2018

    Ideally, your layout shoudl be responsive to fit ALL devices.  

    5 images wiill fit on xlg devices but it needs to break to 4 across on lg,  3 across on md, 2 across on sm and 1 across on xsm devices. 

    There are several ways to do this.  It all depends on which responsive methods you're most confortable wtih.

    Bootstrap, CSS Flexbox, CSS Grids or a commercial extension.

    Nancy O'Shea— Product User & Community Expert
    Legend
    November 6, 2018

    It looks like each row is wrapped in <section></section> <article></article> tags:

    The below code is one section (row):

    <section class="clearfix margin-bottom-20">

    <article class="cols-3">

    <h1><a href="comingsoon.html" title="Styx">Styx</a></h1>

    <a href="comingsoon.html"><img src="index/photos/Styx_Pic.jpg" width="250" height="250" alt="Styx" /></a>

    </article>

    <article class="cols-3">

    <h1><a href="comingsoon.html" title="Vans Warped Tour 2017">Vans Warped Tour (17)</a></h1>

    <a href="comingsoon.html"><img src="index/photos/Vans_Warped_Tour_Logo.png" width="250" height="250" alt="Vans Warped Tour 2017" /></a>

    </article>

    <article class="cols-3 no-margin-right">

    <h1><a href="comingsoon.html" title="Vans Warped Tour 2018">Vans Warped Tour (18)</a></h1>

    <span style="text-align: justify"><a href="comingsoon.html"><img src="index/photos/Vans_Warped_Tour_Logo.png" width="250" height="250" alt="Vans Warped Tour"/></a> </span>

    </article>

    </section>

    In code view you would need to find the code below, it's near the foot of the page, above the footer social-media section and paste the above <section><article></article></section> code in four times, above the code below. Hope that helps.

    </section>

    <section class="section-wrapper">

    <p class="disclaimer">Copyright © 2008 - 2018 www.BigMusicGeek.com, LLC. The views and opinions expressed on this website do not necessarily reflect those of www.BigMusicGeek.com. The content of this website may be reproduced in any form, either electronic or mechanical, including photocopying, recording or informational storage and/or retrieval systems without the express written consent of www.BigMusicGeek.com.</p>

    </section>

    You have also got some corrupt code in the mix:

    <a href="comingsoon.html"http://janedoe.jalbum.net/Sp"><img src="index/photos/Miss_May_I_Pic.jpg" width="250" height="250" alt="Miss May I" /></a>

    Presumably should be as below (without the http://janedoe.jalbum.net/Sp") in the link:

    <a href="comingsoon.html"><img src="index/photos/Miss_May_I_Pic.jpg" width="250" height="250" alt="Miss May I" /></a>