Cool, thanks.
Onn my front page I have a quote. I’m trying to put space between the words. “my favorite quote” and the text below it and a space between the text and the word “Anonymous”.Plus shift the word “Anonymous” to the right. I added CSS but nothing is changing.
Hi conquer2,
Before you get any further, it would be best not to use that <figure> element to hold your content in the main div. It doesn’t quite fit there semantically speaking.
Usage notes
- Usually a
<figure>is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.- Being a sectioning root, the outline of the content of the
<figure>element is excluded from the main outline of the document.- A caption can be associated with the element by inserting a inside it (as the first or the last child).
It looks like your just wanting to set up two columns within the main div?
It would be better to use divs there to get the same visual effect you have now.
And the content after “my favorite quote” would actually be a <blockquote> that naturally creates that space your wanting.
I can give you a hand reworking it if you need help
I didn’t think I could use <blockquote>. so let me give it a try.
This looks good. The only two things I want to do is make all the text a bit bigger and move the word “Anonymous” to the right.
It looks like @mittineague made an edit to post #206.
I think you unintentionally used the blockquote tag in the forum post and he wrapped code tags around it instead.
To clarify, you DO want to use the <blockquote> just as you have in your updated page.
But you may have misunderstood me, you really need to replace the figure element with divs. Use the same classes and it should still pick up the CSS.
Enlarging the text is not an issue, you can add font-size to the corresponding CSS selector.
The “Anonymous” would actually go in a <cite> tag then it would get moved where you want it with margins.
1 Like
You remember how we added an extra class to the main div on each corresponding page?
It’s time to do that again on this home page. We’ll call it <div class="main home">
Go ahead and update your html with this new format…
<div class="main home">
<h2>Home Page</h2>
<div class="row">
<div>
<img src="images/fullbody.png" alt="Photo Of Louis Gaudry" width="305" height="750">
<div class="author">Louis Gaudry</div>
</div>
<div>
<p>Favorite Quote</p>
<blockquote>
If every person who complains about their problems could come from all corners of the earth,
and take and pile their problems in a heap, and if each person could see the size, and gravity
of the problems of others, they would sneak forward shame facedly and take their petty
problems away, and creep into the night.
<cite>"Anonymous"</cite>
<blockquote>
</div>
</div>
</div><!-- .Main Content Ends -->
Now with the home class added in there we can target each specific element that may need it’s own styling.
Don’t worry about how it looks just yet, we will get to the CSS next and line up you cite tag and all text how you want it.
1 Like
I’ve got some new selectors set up for that home page now. Just so your aware, most of those .row classes were set up for the equipment page. We are able to use them though since that’s what classes are for. Some of them need to have some more specifity put on them so they target the home page. That’s what that home class on the main div is for.
I slipped these styles in below the main content styles, and above the gallery styles.
You will notice the outline: 1px solid red; rules commented out. That is a good way for you to see where the elements are when your writing your styles.
p {
margin: .75em;
}
/*--- Home Page ---*/
.home .row > div {
padding: 0;
font-size: 1.1em;
/*outline: 1px solid red;*/
}
.home .row p {
margin: 1em;
max-width: auto;
font-weight: 600;
/*outline: 1px solid red;*/
}
.home blockquote {
margin: 1em 0 0 3em;
padding: 1px 0; /*uncollapse margins*/
font-weight: 500;
/*outline: 1px solid red;*/
}
.home blockquote cite {
display: block;
margin: 1em;
/*outline: 1px solid red;*/
}
/*--- Gallery Styles ---*/
I also meant to post back the other day with a change to your header html, I removed the <br> tag between the h1 spans and made the spans shrinkwrap with display:table instead of display:inline-block.
That eliminates the <br> and keeps it looking the same. So you can remove it on all your pages now.
<div class="header">
<div class="logo"></div>
<div class="heading">
<h1>
<span>1 Finger Trigger</span>
<span>photographer</span>
</h1>
<p class="small">A Division of Charisma Communications</p>
</div>
</div><!--Header Ends -->
.heading h1 {
margin: .65em 0 0;
font-size: inherit;
line-height: 1.1;
}
h1 span {
display: table; /*shrinkwrap text*/
margin-left: auto;/*push it to the right*/
}
h1 span:nth-of-type(1) {
font-size: 1.4em;
font-family: 'Kaushan Script', cursive;
font-weight: 500;
}
h1 span:nth-of-type(2) {
margin: .33em 0 0 auto;/*add auto for left*/
font-size: .75em;
font-family: tahoma;
font-weight: 500;
}
p.small {
display: table; /*shrinkwrap text*/
margin: 1.5em 0 1.5em auto;/*add auto for left*/
font-size: .45em;
font-family: sans-serif;
font-weight: 700;
}
Here is the CSS with all revisions.
Save a back up copy of your current css, in case you’ve made other changes that aren’t in the last file I posted.
screen.css (6.4 KB)
I have the “Favorite Quote” at a bigger font as well as the “Anonymous”. but the middle content I can’t. I also noticed I’m getting a warning regarding line 50 in my code.
You have two opening <blockquote> tags. The second one needs to be a closing </blockquote>.
<blockquote>
If every person who complains about their problems could come from all corners of the earth, and take and pile their problems in a heap, and if each person could see the size, and gravity of the problems of others, they would sneak forward shame facedly and take their petty problems away, and creep into the night.
<cite>"Anonymous"</cite>
<blockquote>
1 Like
Thank you 
1 Like
@conquer2, look back to post #210 where I mentioned removing the <br> tag in the h1.
It’s still in your page, the new CSS eliminates the need for it now. You can remove it on all pages.
<div class="heading">
<h1>
<span>1 Finger Trigger</span>
<span>photographer</span>
</h1>
Done. Forgot. thanks.
1 Like
I still can’t make text bigger in the middle.
Just add a font-size rule here:
.home blockquote {
margin: 1em 0 0 3em;
padding: 1px 0; /*uncollapse margins*/
font-weight: 500;
/*outline: 1px solid red;*/
font-size: 1.2em; /*Add this*/
}
Adjust the font size until it suits your requirements.
Thank you.
Looking over the text on the home page. does it look wrong to anyone.
The text looks to large, it’s larger than the page heading. The cite tag is out of proportion.
It definitely needs to scale down for smaller screens and mobiles.
I would step it down a bit for smaller screens, similar to what was done with the header text.
The page also needs some work on the media queries, it’s making a horizontal scrollbar since something is overflowing.
It’s a combination of the following
<cite>tag that got floated right- 1.5em font on that float with margins
- And the 3em left margin on the blockquote
That has caused it to run out of space for longer words, causing the overflow.
