My projects link is not displaying the thumbnails in the link for my code pen portfolio

My projects link is not displaying the thumbnails in the link for my code pen portfolio
0

#1

hello my code pen portfolio is not displaying the projects thumbnails for some reason I still haven’t been able to figure this out been stuck on this for weeks here is the link to the project:


#2

Can you post the url to one of the thumbnails which you expect to see?


#3

its just a landing thumbnail no actual project in there yet


#4

Well your original post asked why it was not displaying the thumbnails, so if you don’t have links to thumbnails, you should not expect to see any. I believe I may be misunderstanding what you are asking.


#5

I’m sorry so when I click on the button to go to the projects link there should be some thumb nails that are included in my html portion of the project but when I click on the projects tab it show nothing the thumbnail should show here if you look at my html and go to the section that says projects you will see what I mean all the stuff in the projects section of my html l file should be displaying in projects tab but it isn’t

<html>
<body>
<div class="jumbotron">
 <div class="container">
  <h1>Sergio's Portfolio</h1>
    <nav class="navbar navbar-default">
      <ul class="nav navbar-nav">
            <li><a href="#tab1"> HOME </a></li>
            <li><a href="#tab2"> ABOUT </a></li>
            <li><a href="#tab3"> PROJECTS </a></li>
            <li><a href="#tab4"> CONTACT</a></li>
       </ul>
    </nav>
 </div>
</div>
  
<div class="content">
  <div id="tab1">
	  <h1>My first page with style</h1>
    <p>Welcome to this page!</p>
	  <p>It has no images, but it got style.And it has links, to bring you somewhere else</p>
    <p>On this page links are part of a navigation element: a menu. The menu contains links to other parts (tabs) inside this document. The page-logic is realized with jQuery.</p>
  </div>
  <div id="tab2">
    <p>My name is Sergio Alvarado, I am a recent Learn Academy graduate. I've been interning at Victorise for a month and have been learning Angular and Ionic. I was born and rased in North County and been living in Carlsbad, CA.</p>
  </div>  
  <div id="tab3">
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>
</body>
<footer>Made on July, 2017. By Sergio Alvarado.</footer>
</html>

#6

No idea why, but when I delete the row, column and thumbnail divs, then your thumbnail placeholders come up. I don’t see anything in your css or js that would keep it from being visible so Im at a loss.


#8

Hi @SkyC - If $(“div.content div”).hide(); hides all of the subdivs of <div class=’‘content’’>, why when clicking on About, does it not hide the tab2 content also?


#10

I know tab2 does not have any sub divs, but I thought when the following code executes:

$(“div.content div”).hide();

it looks for any divs within the div with content class and hides those divs. When I view the code (a small sub section of his code):

<div class="content">
  <div id="tab1">
	  <h1>My first page with style</h1>
    <p>Welcome to this page!</p>
	  <p>It has no images, but it got style.And it has links, to bring you somewhere else</p>
    <p>On this page links are part of a navigation element: a menu. The menu contains links to other parts (tabs) inside this document. The page-logic is realized with jQuery.</p>
  </div>
  <div id="tab2">
    <p>My name is Sergio Alvarado, I am a recent Learn Academy graduate. I've been interning at Victorise for a month and have been learning Angular and Ionic. I was born and rased in North County and been living in Carlsbad, CA.</p>
  </div> 

tab2 is contained with the div with the content class. I must be misinterpreting what the code actually is targeting.


#12

@SkyC thank you so much this fixed it for now I will look into this further later on but thank you so much for the help!!!


#13

@SkyC - Thanks for the explanation and link. I learned something today and really appreciate it.

FYI - I also figured out the following would work as it would only affect the first subdiv of the div with class=“content” instead of all the children as you originally explained to me.

$("div.content > div").hide(); 

#14

Ahh! You’re awesome! I was able to figure out that it was being hidden, but just didnt know enough to understand why…and it was bugging at me! lol Thanks for explaining this!