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

About Me

Mini Bio
Heather Wright-Porto
Sloatsburg, NY
heather@blogsbyheather.com
Blog Setup and Design
Email Me

Follow Me


Grab My Button

  • Blogs By Heather
Pin It

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

March 26, 2014

Comments

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

Colleen

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!

Colleen

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.

Working...
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.

Working...

Post a comment

Your Information

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

Subscribe To My Blog

  • To keep updated when I post to my blog, subscribe here. Thank you for following me!

    Enter your email address:

    Delivered by FeedBurner

     Subscribe in a reader

Now you can receive updates on your kindle!


Blog Setup

  • For those of you who are self-taught or want to learn how to create and maintain a blog...
    Over 70 videos on "How To Setup Your Blog" (Blogger, TypePad and WordPress instruction)!

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

Cross-browser Testing
IEtester


Affiliate of BlueHost


Affiliate of HostGator