Photo Galleries

[Ray.H]

That’s close, the following changes would keep you from having to change styles in a media query.

In the html, add the .contain class to your blockquote to contain it’s floated children. We already had that class set up in the CSS just for something like this.

<blockquote class="contain">

Then these slight changes should hold it all together for mobiles.
Copy/Paste this whole block in your CSS, changes were made on all margins

.home .row p {
  font-size: 1.3em;
  margin: 1em 0;
  font-weight: 600;
  /* outline: 1px solid red; */
}
.home blockquote {
  margin: 1em 0 0 2em;
  padding: 1px 0;
  font-weight: 500;
  font-size: 1em;
  /* outline: 1px solid red; */
}
.home blockquote cite {
  float: right;
  font-size: 1.4em;
  display: block;
  margin: 1em 0 0;
  /* outline: 1px solid red; */
}

[conquer2]

Better?

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

[Ray.H]

@Ray.H

In the html, add the .contain class to your blockquote to contain it’s floated children. We already had that class set up in the CSS just for something like this.

<blockquote class=“contain”>

You missed that part, once it’s done then change the top margin on the cite

.home blockquote cite {
  float: right;
  font-size: 1.4em;
  display: block;
  margin: 2em 0 0;
  /* outline: 1px solid red; */
}

That will hold everything together in the blockquote

[conquer2]

Better?

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

[Ray.H]

Yes that’s better but that float can be eliminated now that I think about it.

It could have simply been text-align: right on the cite since I had it set as display block

I think that will make things easier to work with

Do this instead

.home blockquote cite {
  display: block;
  text-align: right;
  font-size: 1.4em;
  margin: .5em .5em 0 0;
  /* outline: 1px solid red; */
}

You can also take that contain class back off the blockquote in the html now

<blockquote>

That should do it

I’ll check your link again in a few minutes

EDIT:
added period in front of .home blockquote cite

[conquer2]

Thank you.

[Ray.H]

Your Welcome. That looks much better on mobiles now.

Don’t forget to remove the <br> tags from your header h1 on all your other pages.

[conquer2]

ok. thanks.