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!

The comments to this entry are closed.

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