I’m determined to learn css grid in PG, but once again having problems with a gallery.
Looks great in PG and lousy online at mcgraphics.us/wolf
Help please. Maybe @schpengle you have an idea.
Also I’d like each wolf’s bio (below name) to have a dropdown. The bio would show a couple lines (like wordpress comments with …). Is there a block for that or maybe an animation with a move over?
@kat ,
'Elo! 
I will have a go at that when I get home.
Im currently on a bit of road trip, right down the tip of Britain, Cornwall, way on down the South West, near Lands End.
Had a New car off a friend, first Journey, Helping out a couple of old friends for a day or two, been away for 3 so far, off to visit some ancient EarthWorks/sacred site, then wander back to Wales.
But have my laptop, so might have a stare at it on the way but… EXPLORE TIME!
CORNWALL!, New Car, Screens?.. er, not right now 
Your “Our Pack” part makes no sense. You should follow the Bootstrap classes and components.
You use multiple ID’s with the same name, please change them in:
id="navbarDropdown1"
id="navbarDropdown2"
etc.
Just use the cards from Bootstrap like this:
This is a small example, no need for extra code maybe class="img-fluid" for the images in the cards and if needed the container could be made wider container-fluid instead of container
The images could be easily masked in the proper shape if needed to get what you want.
<section class="wolf-pack">
<container>
<div clas="row>
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
</div><!--closing first row-->
<div clas="row>
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
<div class="col-md-2">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h3>Denali</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div
</div><!--closing second row-->
</div><!--closing container-->
</section><!--closing section-->
Hi @kat,
Not as much time as I would like to reply - sorry. I’m not completely sure of the reason. I want to poke in the code and think about grid a little more. But, if you remove the height: 100% from your images I think you should be good. I’m not understanding the difference between Pinegrow and online. Very strange and potential bug.
Cheers,
Bob
Removing 100% worked perfectly, Rob.
@schpengle “ancient EarthWorks/sacred site, then wander back to Wales”
Awesomely impressed?
This is great. Will change dropdown IDs.
Can I could use Bootstrap in the nav and hero image and remove Bootstrap code for the gallery css grid? I thought css grid could work with BTS but not require it in areas I’m strictly using a css grid like the gallery.
I know how, but still having trouble attaching classes in PG to the right element.
So much to learn. Thanks for the help.
Also I’d like each wolf’s bio (below name) to have a dropdown.
Accordion or maybe a move over animation. So many choices.