Responsive columns pages

6 posts by 4 authors in: Forums > CMS Builder
Last Post: August 27, 2015   (RSS)

I have built 2 equally nice bootstrap pages one with a table & one with  divs  neither is responsive

Haven't a clue how to fix either I would like to learn the div ones and stay away from the tables if possible.

But would be very happy with anything that really works as a responsive solution.

http://corraldetierrarealty.com/Listing1.php      < divs

<div class="jumbotron" style="padding-top: 18px;">

<div class="row">

<div class="col-xs-6">
<?php foreach ($listingsRecords as $record): ?>

<h3 align="center"><font color="#800000"><?php echo $record['status'] ?></font><br>
<a href="<?php echo $record['_link'] ?>"> <?php echo htmlencode($record['address']) ?></a><br/>
<font size="3">
<?php echo $record['bedroom'] ?> Beds <?php echo $record['bath'] ?> Baths | Sq Ft: <?php echo htmlencode($record['approximate_square_footage']) ?>
<br>
</font>
<?php foreach ($record['photos'] as $index => $upload): ?>
<a href="<?php echo $record['_link'] ?>"> <img src="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" width="400" height="268" alt="" /></a>
<?php break; ?>
<?php endforeach ?>
<br/>
<?php echo htmlencode($record['price']) ?>
<br/> <font size="3">Email: <a href="mailto:<?php echo $record['email'] ?>"><?php echo join(', ', $record['agent:values']); ?></a></font>

<?php $maxCols=2; if (@++$count % $maxCols == 0): ?> </div> <div class="col-xs-6">

<?php endif; ?>
<?php endforeach ?> </div>


</div></div>

the attached listing.php page is the table page

Patricia

www.thenetgirl.com
Attachments:

Listing1.php 3K

Listing.php 4K

By Damon - August 26, 2015

Hi Patrica,

Check out this Live fluid grid example here:
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

Make the browser window small to see how the boxes stack, then view source to see the code used.

I think this is what you are after.

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Toledoh - August 26, 2015

If you change the following:

<a href="<?php echo $record['_link'] ?>"> <img src="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" width="400" height="268" alt="" /></a>

to 

<a href="<?php echo $record['_link'] ?>"> <img src="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" class="responsiveImage" /></a>

And add another class to your stylesheet: .responsiveImage{ max-width:100%;}

Cheers,

Tim (toledoh.com.au)

Yeah that did nothing for responsiveness of the rows, columns or tables just resized my images. Toledoh 

and that bootstrap link is way out dated I have the correct bootstrap info

I just need the  2 listing on a row and to loop the rows with 2 up each time to be responsive

 I can't believe it should be this hard but ..it seems to be.

Patricia

www.thenetgirl.com

By JeffC - August 27, 2015

Try changing 

<div class="col-xs-6">

to

<div class="col-xs-12 col-sm-6">

That should make the column full screen width on devices narrower than 768px wide and two columns on devices >768px

Jeff