Jump to content

How to align banner title (and text) to the left, after reducing the height of the banner image?

Recommended Posts

I am using the Bedford template and I would like to change the height of the banner image, while pushing the title (and text) to the left and keeping it vertically centered.

First I aligned the title to the left using this code:

.desc-wrapper { margin: 0!important; text-align: left!important;}

Separately, I was able to reduce the height and keep the title vertically centered using the code from this page:

http://answers.squarespace.com/questions/61848/how-to-center-the-banner-heading-text-vertically

But I couldn't integrate the left-align code into the other one so that it would work.

Can anyone tell me how to do all three things at the same time: reduce banner image height, keep title (and text) vertically centered, and align title (and text) to the left?

I appreciate any help in advance!

Link to comment
  • Replies 6
  • Views 14.5k
  • Created
  • Last Reply

Copy and paste the following into Design > Custom CSS.


/*   set banner image height; vertically center banner   description text and justify left   =================================================*//*   set height of banner image (#thumbnail) and its   parent (.banner-thumbnail-wrapper), hide overflow   and zero padding */#thumbnail,.banner-thumbnail-wrapper {  height: 250px;  overflow: hidden;  padding: 0 !important;}/*   vertically center banner description within its    parent (.banner-thumbnail-wrapper), align text left   and zero padding except padding-left*/.banner-thumbnail-wrapper .desc-wrapper {  position: absolute;  top: 50%;  transform: translateY(-50%);  text-align: left;  padding: 0;  padding-left: 20px;}

Adjust the 250px value as you desire.

For a great guide to centering things, see CSS-Tricks' article Centering in CSS: A Complete Guide.

Let me know whether it works   :-)   or doesn't   :-(

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

For people to help, you really need to give the url to your site.

I happen to have the Bedford template so I was able to experiment on a test page on my site but most users won't have your template and will need to examine your site with the browser's DevTools.

I don't know what you mean by Title. I have no title associated with the banner image on my site and can't examine yours. If it's something not covered by the answer below, let me know and I will try to address it.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Oh wow, thank you so much! The code worked perfectly!

The reason I didn't share the site - although you are perfectly right about that - is because I am building it for small business, and it currently contains information that I don't think the business would like to share until the website is perfectly done. Also, access to the site is currently locked with a password, plus it changes day to day. But once it's final and up, I'll make sure to post the link here so that people with a similar issue could see it.

Again, thank you very much for your help!

Link to comment

My pleasure.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 6 months later...

Hi alxfyv ,

flagranch.squarespace,com

I am using the Bedford template and tried using your suggested code above but nothing is happening.Would you have any other suggestions? Unfortunately the description covers the most important part of the image.

Thank you,

Buffie

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.