Forum

Thread tagged as: Question, Problem, Configuration

Every code not working for second row

Perch 3.0.9 What is wrong this code that the second row items are in a list orientation one on top of the other centered.

<perch:before>
 <div class="row small-up-1 medium-up-1 large-up-3" style="border: none;padding-top:15px;padding-bottom: 6px;" > 
</perch:before>
<div class="column center" style="text-align:center;">
<span style="text-align:center;font-size:18px;font-weight:bold;"><perch:content id="title" type="text" label="Name of Restaurant" /></span><br />
<a href="https://www.google.com/maps/place/<perch:content id="address" type="text" Label="Address" />"><perch:content id="address" type="text" label="Address" /></a><br />
<a href="tel:<perch:content id="phone" type="text" label="Phone number" />" ><perch:content id="phone" type="text" label="Phone Number"/></a><br />
<perch:content id="text" type="textarea" label="Text" html="true" editor="ckeditor" imagewidth="640" imageheight="230" />
</span></div>
<perch:every count="3">
</div>
 <div class=“row small-up-1 medium-up-1 large-up-3" style="border: none;padding-top:15px;padding-bottom: 6px;">
</perch:every>
<perch:after>
</div>
</perch:after>

If this can't be fixed. My client wants multiple items on the page that alphabetize and are 3 across. Items will often be removed so we need a way to move an item up to the previous row if one is deleted.

Carol Swinehart 0 points

3 years ago

Simon Clay 127 points

3 years ago

Can you show the output you're getting and the output you want?

Carol Swinehart 0 points

3 years ago

 <div class="row small-up-1 medium-up-1 large-up-3" style="border: none;padding-top:15px;padding-bottom: 6px;" > 

<div class="column center" style="text-align:center;">
<span style="text-align:center;font-size:18px;font-weight:bold;">Ale House 1890</span><br />
<a href="https://www.google.com/maps/place/149 West Main Street Lancaster, OH 43130">149 West Main Street Lancaster, OH 43130</a><br />
<a href="tel:740-277-6053" >740-277-6053</a><br />
<p><img alt="Ale House 1890" src="/calendar_only/resources/alehouse2-9-w640h230.jpg" style="border-style:solid; border-width:2px; height:230px; margin:2px; width:356px" /></p>
</span></div>




<div class="column center" style="text-align:center;">
<span style="text-align:center;font-size:18px;font-weight:bold;">Diamond Jim's Pizza</span><br />
<a href="https://www.google.com/maps/place/111 N Columbus Street Lancaster, OH 43130">111 N Columbus Street Lancaster, OH 43130</a><br />
<a href="tel:740-974-6060" >740-974-6060</a><br />
<p><img alt="Diamond Jims Pizza" src="/calendar_only/resources/diamondjims-4-w640h230.jpg" style="border-style:solid; border-width:2px; height:230px; margin:2px; width:356px" /></p>
</span></div>




<div class="column center" style="text-align:center;">
<span style="text-align:center;font-size:18px;font-weight:bold;">Mystery</span><br />
<a href="https://www.google.com/maps/place/129 E Main St, Lancaster, OH 43130">129 E Main St, Lancaster, OH 43130</a><br />
<a href="tel:740-654-5823" >740-654-5823</a><br />
<p><img alt="" src="/calendar_only/resources/jimspizzahotdogs-1-w640h230.jpg" style="border-style:solid; border-width:2px; height:230px; margin:2px; width:473px" /></p>
</span></div>

</div>  <!-- works up to here  next row all columns become one column centered -->
 <div class=“row small-up-1 medium-up-1 large-up-3" style="border: none;padding-top:15px;padding-bottom: 6px;">




<div class="column center" style="text-align:center;">
<span style="text-align:center;font-size:18px;font-weight:bold;">Peter Pipers</span><br />
<a href="https://www.google.com/maps/place/100 Main St, Lancaster, Ohio 43130">100 Main St, Lancaster, Ohio 43130</a><br />
<a href="tel:740-422-9257" >740-422-9257</a><br />
<p><img alt="" src="/calendar_only/resources/alehouse-1-w640h230.jpg" style="border-style:solid; border-width:2px; height:230px; margin:2px; width:362px" /></p>
</span></div>




<div class="column center" style="text-align:center;">
<span style="text-align:center;font-size:18px;font-weight:bold;">Shaw's Restaurant</span><br />
<a href="https://www.google.com/maps/place/123 N Broad St, Lancaster, Ohio 43130">123 N Broad St, Lancaster, Ohio 43130</a><br />
<a href="tel:740-654-1842" >740-654-1842</a><br />
<p><img alt="" src="/calendar_only/resources/shaws2-8-w640h230.jpg" style="border-style:solid; border-width:2px; height:230px; margin:2px; width:306px" /></p>
</span></div>


</div>
<!-- even though the code seems to be the same the two items above are one on top of one another -->

There should be two rows of 3 items -- 3 across. Not one row, three across and next row 1 item on top of another in the center of the page.

Carol Swinehart 0 points

3 years ago

oops forgot to put in page example -- visitfairfieldcounty.org /resttest3.php If you go to that page you will see the "train wreck".

Carol Swinehart 0 points

3 years ago

Got it working. Apparently, there was some conflict with the Foundation row code. It is working now Apparently not closing correctly at the bottom as it writes over the footer. But the rows are good and have 3 across. The perch alphabetize feature does not work with this. You have to use the reorder feature in order for the items to be alphabetized..

Simon Clay 127 points

3 years ago

Ah, well done :)