Add three columns of text below featured image

  • Unknown's avatar
    cynthiakirk · Member ·

    I’d like to put three columns of text below my featured image on each page like I’ve done here: http://packagenv.com/create/. However this page is a static jpeg image. When I try a different page configuration it doesn’t seem to work. Is this possible?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    Here’s one possible solution as something to get you started.

    First, add some HTML to the page using the text tab:

    <div class="box1">
<h3>Unique Design</h3>
<p>Our current and relevant designed well reflect your personal story vision and differentiate it from others with eye-catching shelf appeal.</p>
</div>

<div class="box2">
<h3>The Whole Package</h3>
<p>We will translate your chosen label design to capsules, corks and shippers to give your package a cohesive, unified look.</p>
</div>

<div class="box3">
<h3>Attention to Details</h3>
<p>It is the details that make or break the final package. Be confident that we will take care of the final point so there are no surprises on the bottling line.</p>
</div>

    Then add some custom CSS to the Appearance > Customize > CSS editor to modify how the divs look:

    .box1, .box2, .box3 {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	float: left;
	width: 29.2%;
	height: 290px;
	overflow: hidden;
	padding: 2%;
}
.box1 {
	border-right: 1px solid #000;
}
.box3 {
	border-left: 1px solid #000;
}
.box1 h3, .box2 h3, .box3 h3 {
	color: #C16886;
	font-family: museo-sans-1,museo-sans-2,"Helvetica Neue",Helvetica,Arial,Verdana,Tahoma,sans-serif;
	font-size: 1.2em;
	text-transform: uppercase;
}

    If you want to adjust the boxes to work well on smaller screens like iPads and smartphones too, you could also add a media query like this:

    @media screen and (max-width: 680px) {
	.box1, .box2, .box3 {
		width: 95%;
		height: auto;
		border-top: 1px solid #000;
		border-right: none;
		border-bottom: none;
		border-left: none;
	}
	.box3 {
		border-bottom: 1px solid #000;
	}
}

    Note that you would need to adjust the numbers like widths and heights if you change the text in the boxes. Also, the font-family property depends on having “Museo Sans” selected as one of the fonts in the Appearance > Customize > Fonts section. If you select different fonts, you can take out the font-family line and adjust the font-size and color as needed. All of the CSS is adjustable, so you can experiment with it until you get a result that you like.

  • Unknown's avatar
    cynthiakirk · Member ·

    Wow, thank you so much! It is really starting to come together now. Is there a way to make the type smaller in the box to keep the words from hyphenating? Also, how can I hide the title of the page “HOME” and the “Leave a Reply” box at the bottom? Thank you!

  • Unknown's avatar
    cynthiakirk · Member ·

    One more question, there is too much space between all of the elements on the page, can I shrink up the “padding?”

  • Unknown's avatar
    designsimply · Member ·

    Wow, thank you so much! It is really starting to come together now.

    Awesome!

    Is there a way to make the type smaller in the box to keep the words from hyphenating?

    To adjust the font size for paragraphs inside the boxes using the HTML example from earlier, add this:

    .box1 p, .box2 p, .box3 p {
	font-size: .8em;
	word-wrap: normal;
}

    Adjust the .8em value as needed. The word-wrap rule may help, but words will still also break at normal break points. Since web text is more flexible than layout and placement in a graphics problem, how the words wrap could look different on different monitor sizes and that’s normal.

    Also, how can I hide the title of the page “HOME”?

    I see you used this to remove “HOME”:

    H1 {
	color: transparent
}

    Instead of that, you might try using display:none. If you want to hide all page titles on all pages, use this:

    h1 {
	display: none;
}

    Or if you just want to hide the title on the home page only, use this:

    .home h1 {
	display: none;
}

    and the “Leave a Reply” box at the bottom?

    You can turn off comments for the page and the comment form will go away. See http://en.support.wordpress.com/enable-disable-comments/

    there is too much space between all of the elements on the page, can I shrink up the “padding?”

    In the rule for “.box1, .box2, .box3” you changed the height from 290px in my example to 420px. Try making that smaller again.

    Be careful, because at smaller browser widths, the text is fluid and it’s normal for it to need to be a different height for different browser widths. That’s why I included the @media rule in my previous example, and that’s also why I added “overflow: hidden;” It looks like you changed it to “overflow:show;” but “show” isn’t a valid value there so if you don’t want to use “overflow: hidden;” then just remove that line completely.

  • Unknown's avatar
    cynthiakirk · Member ·

    Thanks… I’m still having trouble with a couple things. In the boxes, the type doesn’t sit at the top, is there some code that will shrink up that space? Also, do I need to add the extra fonts in the font family like you did, or can I just specify the font I want? Thank you for all your help so far, I really appreciate it!

  • Unknown's avatar
    cynthiakirk · Member ·

    Well, I figured out the spacing issue myself but still wondering about the font issue. If I only specify the font I want, does that mean different browsers might have a hard time interpreting it?

  • Unknown's avatar
    thesacredpath · Member ·

    It is always best to declare a few fonts of your choosing in case the first font doesn’t load for some reason, that way you can decide what the fallback fonts will be. If you don’t, then the browser will choose for you and typically falls back to the standard serif or sans-serif built into the browser.

  • The topic ‘Add three columns of text below featured image’ is closed to new replies.