getting a list to line up and stay responsive on the W3.CSS portfolio template

[rich_web_development]

Hi,

I'm trying to edit the W3.CSS portfolio template.

The part I want to edit looks as follows:

<!-- First Photo Grid-->
  <div class="w3-row-padding">
    <div class="w3-third w3-container w3-margin-bottom">
      <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container w3-margin-bottom">
      <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container">
      <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
  </div>

I want to edit it so that instead of just some text I want to achieve something like as below the following:

 

Name: Holiday home

Bedrooms: 3

Width: 20

 

So that 'Name: Bedrooms: Width:' will be static text and the info next to it will be pulled from a database.

 

The problem is getting the info to line up nice and neat and getting it to act responsive when the size of the screen/browser is different/changed. I've tried it with a list but I just cannot work out how to get the static part 'Name: Bedrooms: Width' and then the info part 'Holiday home, 3, 20' to line up nice an neat (like it is above) and get it responsive.

 

If someone could suggest the best way to get this to work I would be very grateful.

 

 

 

[dsonesuk]

<div class="w3-row-padding">

<div class="w3-third w3-container w3-margin-bottom">

<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

<div class="w3-container w3-white w3custom-list">

 

<p><b>Name</b> <span>Holiday home</span></p>

<p><b>Bedrooms</b> <span>3</span></p>

<p><b>Width</b> <span>20</span></p>

 

 

</div>

 

</div>

<div class="w3-third w3-container w3-margin-bottom">

<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

 

<div class="w3-container w3-white w3custom-list">

 

<p><b>Name</b> <span>Holiday home</span></p>

<p><b>Bedrooms</b> <span>3</span></p>

<p><b>Width</b> <span>20</span></p>

 

 

</div>

 

</div>

 

<div class="w3-third w3-container">

<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

 

<div class="w3-container w3-white w3custom-list">

 

<p><b>Name</b> <span>Holiday home</span></p>

<p><b>Bedrooms</b> <span>3</span></p>

<p><b>Width</b> <span>20</span></p>

 

 

</div>

 

</div>

</div>

<style>

.w3custom-list > p b {display: inline-block; width: 30%; min-width: 100px;}

.w3custom-list > p b + span {display: inline-block; width: 68%;}

</style>

[rich_web_development]

 <div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white w3custom-list">

<p><b>Name</b> <span>Holiday home</span></p>
<p><b>Bedrooms</b> <span>3</span></p>
<p><b>Width</b> <span>20</span></p>


</div>

</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

<div class="w3-container w3-white w3custom-list">

<p><b>Name</b> <span>Holiday home</span></p>
<p><b>Bedrooms</b> <span>3</span></p>
<p><b>Width</b> <span>20</span></p>


</div>

</div>

<div class="w3-third w3-container">
<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

<div class="w3-container w3-white w3custom-list">

<p><b>Name</b> <span>Holiday home</span></p>
<p><b>Bedrooms</b> <span>3</span></p>
<p><b>Width</b> <span>20</span></p>


</div>

</div>
</div>

<style>
.w3custom-list > p b {display: inline-block; width: 30%; min-width: 100px;}
.w3custom-list > p b + span {display: inline-block; width: 68%;}
</style>

 

That is amazing. Thank you very much. When the browser is small the static text and info line up side by side which is exactly what I wanted to achieve. When the browser is full screen the info appears underneath the static text. Is there a way for the info to be displayed side by side with the static text when the browser is in full screen?

 

Is there something wrong with the w3schools website? When I visit a page it jumps to the bottom of the page and starts playing some video with music. Just went to a page and it started playing some ad for Thomson Cruises.

[dsonesuk]

That is the opposite of what I gave you? when large width the <b> and <span> are of the same row, the static text has min-width setting to the longest static content 'bedrooms' so when percentage falls reaches this width it stops, and because info set percentage span width + the now fixed static width is greater than the total width it goes to next line.

 

I don't have such a problem, I hate all the ads w3shools and this forum show trying dump all there crap in my cache, because I have ABP 'Ad Block Plus' I don't see any MF ads.

[rich_web_development]

That is the opposite of what I gave you? when large width the <b> and <span> are of the same row, the static text has min-width setting to the longest static content 'bedrooms' so when percentage falls reaches this width it stops, and because info set percentage span width + the now fixed static width is greater than the total width it goes to next line.

 

I don't have such a problem, I hate all the ads w3shools and this forum show trying dump all there crap in my cache, because I have ABP 'Ad Block Plus' I don't see any MF ads.

 

Thanks for that. I just commented out the

w3custom-list > p b + span {display: inline-block; width: 68%;}

bit and now the static text and the info line up side by side. I have another problem now. Now that I have the photos and info coming from a database so I have no need for the static information for example:

<div class="w3-third w3-container w3-margin-bottom">
<img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">

<div class="w3-container w3-white w3custom-list">

<p><b>Name</b> <span>Holiday home</span></p>
<p><b>Bedrooms</b> <span>3</span></p>
<p><b>Width</b> <span>20</span></p>


</div>

So I've deleted the above and changed it to the following:

<?php
    // edited from here
    $stmt = $conn->prepare("SELECT name, bedrooms, length, width, mainpic, serialno FROM holidayhomes");
    $stmt->execute();
    $stmt->bind_result($name, $bedrooms, $length, $width, $mainpic, $serialno);

    $result = $stmt->get_result();    
    $rows = $result->num_rows;
    for ($j = 0 ; $j < $rows ; ++$j)
    {
    $result->data_seek($j);
    $row = $result->fetch_array(MYSQLI_NUM);
    echo <<<_END
    
    <!-- First Photo Grid-->
  <div class="w3-row-padding">
  	<div class="w3-third w3-container w3-margin-bottom">
  	<img src="/uploads/$row[4]" alt="holiday home" style="width:100%;max-height:174px;" class="w3-hover-opacity">
  	<div class="w3-container w3-white w3custom-list">
  	<p><b>Name</b> <span>$row[0]</span></p>
  	<p><b>Bedrooms</b> <span>$row[1]</span></p>
  	<p><b>Width</b> <span>$row[2]</span></p>
    <p><b>Length</b> <span>$row[3]</span></p>
    <p><b>SerialNo</b> <span>$row[5]</span></p>
  	</div>
  	</div>
_END;
  }
  $result->close();
  $conn->close();
?>

So now that I've deleted the static part all of the grey background collapses underneath and everything is moved up underneath the photo and info of what is displayed from my database. So when the page was displayed with static content the photos and info were above a pagination which all of this was on a grey background with a footer underneath all of the above. Now I'm pulling the photos and the info from a database everything that was below and behind the photos and info have collapsed up underneath the photos and info.

 

Actually, I think I have it. I just put some margin-top on the pagination. Although when the browser is smaller it leaves a big gap so will have to change the margin-top on the pagination when the browser is smaller.

Edited September 30, 2016 by rich_web_development

[dsonesuk]

You say grey background, I don't see any of that! so why mention it? and you say, you have no need for static info? what? If you mean I showed only static, Well yeah! I really can't do anything else, IT IS up to YOU to make it dynamic from database by replacing the static info html area i produced.

 

And as for collapsing underneath problem, you are looping multiple time producing '<div class="w3-row-padding">', its only required once, and if you compare open div element tags to close div element tags, you will see they wont close properly, and what you will get, instead of individual container areas, are containers nested inside containers with no closing tags to separate them.

[rich_web_development]

You say grey background, I don't see any of that! so why mention it? and you say, you have no need for static info? what? If you mean I showed only static, Well yeah! I really can't do anything else, IT IS up to YOU to make it dynamic from database by replacing the static info html area i produced.

 

And as for collapsing underneath problem, you are looping multiple time producing '<div class="w3-row-padding">', its only required once, and if you compare open div element tags to close div element tags, you will see they wont close properly, and what you will get, instead of individual container areas, are containers nested inside containers with no closing tags to separate them.

 

I didn't mean that you showed me only static. I rushed my last post and I'm still learning about all this web dev stuff. Apologies for my post being unclear. Thanks for all your help and advice.