I have broken the site doing CSS

[noah]

Hi there,

I have had to move a site to a new domain http://www.betterretirementhousing.com, and all was going well until I tried to edit the CSS to make the header image more attractive.

I put this in the CSS file and the result is a broken site.

Any idea what is going on or how to fix?

.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
display: block;
float: left;
width: 620px;
height: 124px;
margin: 0;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}

#header {
width: 960px;
height: 124px;
margin: 0 auto 0;
padding: 5px;
}

#header .widget-area {
width: 340px;
color: #333333;
float: right;
margin: 0;
padding: 0;

http://www.betterretirementhousing.com

[Victor Font]

You made the image too wide, that's all. First, please take the time to read this article. It will provide an understaning of what's going on. https://victorfont.com/understanding-genesis-framework-site-header-layout/

Next, add background-size: contain; to .header-image #header #title-area at line 202 in style.css.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[noah]

I am sorry I am so useless at this.

Are you saying I just write:

add background-size: DO I SPECIFY 960?
contain; to .header-image #header #title-area

at line 202?

Not this, which is what I have copied from Chrome CSS edit?

.header-image #header #title-area {
background: url(images/logo.png) left top no-repeat;
}

.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
display: block;
float: left;
width: 620px;
height: 162px;
margin: 0;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}

#header .widget-area {
width: 300px;
color: #333333;
float: right;
margin: 0;
padding: 0;
}

what I am trying to achieve is in this pic.

There is too much white space below the header as well.

And duplicated RSS for posts and comments for some reason below the menu.

[noah]

I write this for any other complete CSS idiots out there:

For some time, even years, I have thought you copied the right hand side CSS element box in the Chrome / Firefox inspector and copied this into your CSS file.

(This has not been altogether that successful over the years, but then I do the absolute minimum of this, using WordPress to ... convey words. I'm not a developer at all.)

Usually, what CSS I have done has been provided by kind souls, such as Victor, above.

I fact, you click on the link in the element inspector (in Chrome), get to a copy of the entire CSS file and make the amendments (if they have not been made by clicking the link).

You then copy that entire file and place it in your website's CSS stylesheet.

(Well, I did not know, so may be others don't.)

In this case, the order of doing the amendments was important:

1/ reduce the depth of the header;
2/ reduce the space around the search box widget area;
3/ Then increase the size of the logo.

I still have duplicated comment and post RSS for some reason under the menu, which I think means chopping off some HTML. Another time.

This will strike many here as terribly ill informed ... in mitigation the words on this site (approx 100,000 of them) have been quite influential ...

[Victor Font]

You don't mention 960 with background-size: contain. Your final code looks like this:

.header-image #header #title-area {
    background: url(images/logo.png) left top no-repeat;
    background-size: contain;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts