Photo Galleries

All good, Had to clear browser history.

1 Like

If I add more to my bio. ill it expand?

Yes, it would expand.

I think I’m just a few minutes away from the display:table version that will be much easier for you to manage and make edits. It will use half the amount of code and look the same.

1 Like

:+1:

Here is the display table version. It will be easier to manage.

I found myself fighting with the flex version to make it behave like display:table :neutral_face:

Go ahead and lay these new files in and let them overwrite the others.

screen.css (5.7 KB)
equipment.html (3.9 KB)

Then upload to your site so we can see how it works.

1 Like

Looks awesome. Thak you.

http://www.charismacommunications.ca/rebuild2/index.html

1 Like

Let’s make one quick correction and then I’m going to turn you loose. :slight_smile:

If you notice when the media queries kick in, the text for your “neck strap” image sits on top. On all the others it is below.

I took care of that in flexbox by using the order property, but that does not exist with display table. But there is a work around for stacking with display table.

So let’s use it.

I added a class to the neck strap div called .last

          <div class="row">
            <div class="center last">
              <p>Pacsafe Camsafe 75 Neck Strap</p>
            </div>
            <div class="caption-image">
              <img src="images/neck-strap.jpg" alt="Pacsafe Camsafe 75 Neck Strap" width="523" height="500">
            </div>
          </div>

Then I made changes in the css.

@media all and (max-width: 800px) {
  .row {
    width: 100%;
  }
}
@media all and (max-width: 600px) {
  .row, .cap-columns,
  .row > div, .column {
    display: table;
    width: 100%;
  }
  .row .last {
    display: table-footer-group;
  }
}

I also removed that border above that same div.

Here are your files again and this should wrap it up. :slight_smile:

screen.css (5.7 KB)
equipment.html (3.9 KB)

If you need help with any of your other pages it will be best to start a new thread as this one has run it’s course since it was about the photo gallery.

All the Best!

Better ?

http://www.charismacommunications.ca/rebuild2/equipment.html

1 Like

Yes, that’s better.
All captions are under the images now for mobiles.

You will also notice your bio and neck strap captions, change widths at at 800px.

I set them to 80% width on wide screens so the text and images were closer together.

If you don’t like that just set it back to 100% by removing the last two rules shown below and it will revert back to it’s original 100% (shown in the top rule)

.row, .cap-columns {
  display: table;
  width: 100%;
  box-sizing: border-box;
  border-spacing: .5em;
}
/*--- .row is the 100% width captions ---*/
.row {
  width: 80%;
  margin: auto;
}
@media all and (max-width: 800px) {
  .row {
    width: 100%;
  }
}

I’m good with it. thanks so much.

1 Like

Can I use <p></p> inside of <figcaption></figcaption>

Did you forget the backticks around your code? (we can’t see it)

Wjat do you mean :slight_smile:

When you post inline code, like <p></p>, you need to add a backtick ` before and after the code or it will not display. I’ve edited your post to format the tags.

So sorry. That explains why I don’t see it. Let me try again.

1 Like

It’s OK. It takes a while to get used to all the ins and outs of forum posting.

1 Like

So getting back to my question. Can I use <p>paragraphs</p> inside <figcaption>Text goes here</figcaption>

This is a great resource for answering those kinds of questions.

There you’ll find:

Permitted content: Flow content.

And in case that doesn’t mean too much to you, a helpful link to an explanation:

Flow Content

Elements belonging to the flow content category typically contain text or embedded content. They are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.

2 Likes

Question. Because I have a class for all images. is there away I can control one image seperate from the others?

Assuming the existing class needs to apply to all images, you can add another class to the one image and assign override or additonal properties to create the changes.