Highlighted

Adding Additional Cells To A Photo Index Page...

Explorer ,
Nov 06, 2018

Copy link to clipboard

Copied

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!

Views

174

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adding Additional Cells To A Photo Index Page...

Explorer ,
Nov 06, 2018

Copy link to clipboard

Copied

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!

Views

175

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 06, 2018 0
LEGEND ,
Nov 06, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 1
Adobe Community Professional ,
Nov 06, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 1