Blogs By Heather, Blog Setup, Blog Design, Heather Wright-Porto

About Me

Mini Bio
Heather Wright-Porto
Sloatsburg, NY
Blog Setup and Design
Email Me

Follow Me

Pin It

« How To Setup a Blog | Main | My Site Auditor: An Amazing Tool You Can't Live Without! »

March 26, 2014


Feed You can follow this conversation by subscribing to the comment feed for this post.


I forgot to mention - the code above will hide the text version of the blog title and description. We don't recommend commenting it out in the blog settings - using CSS is better from a SEO perspective. Thanks again!


Thank you for letting your readers know about our new design! A lot of work went into it and a lot of great new themes will be built on it!

We're going to be posting a full tutorial on adding a banner to this theme on Everything Typepad - there's some extra code that needs to be including to make sure everything scales properly at smaller screen sizes.

It looks like this:

.container .jumbotron { padding: 0; }
.jumbotron { padding: 0; margin-top: 15px; }
.jumbotron h1 { margin: 0; }
.jumbotron h2 { display: none; }

.jumbotron h1 a
background: url(banner.jpg) center top no-repeat;
background-size: contain;
display: block;
left: 0;
top: 0;
height: 200px;
width: 100%;
text-indent: -1000em;
min-width: 320px;

/* Extra Small */
@media (max-width: 768px) {
.jumbotron { height: 90px; }

/* Small */
@media (min-width: 768px) {
.jumbotron { height: 140px; }

/* Medium */
@media (min-width: 992px) {
.jumbotron { height: 180px; }

/* Large */
@media (min-width: 1200px) {
.jumbotron { height: 200px; }

That tells the screen to scale the height down based on the width. Start with the Large - that's the height of the banner image at its starting point. Then it should progressively get smaller, using about the same changes I included in the code.

We'll have that and more tips on Everything Typepad soon!

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)

All content © Heather Wright-Porto (Premier Computer Solutions LLC). You cannot publish, copy, edit, sell, trade or distribute without prior authorization.