Page background falling short of page length

[inetinitiatives]

Hi Jason,

I did a theme update a few weeks ago and am coming across small tweaks that I’ve been tackling one at a time. We made some stylistic changes using a child theme and unfortunately my developer is no longer available so I’m hoping you can point me in the right direction in terms of addressing this one problem.

It seems that my background image is now falling short in terms of height; the image is set to scroll which is what I need, but it now seems that the image doesn’t continue far enough on the page, on any of the pages, even short ones. The weird thing is that this is appearing on all of my pages even those that haven’t changed in length (i.e. content has remained static) since the initial launch of the site. Is this simply a matter of extending the bottom of my image to make up for the lack of height? If so, is this something that was affected by the theme update?

URL: cnhfoundation.org
http://s18.postimg.org/nnqj6z4ft/chnfoundation_missing_bkgrnd.jpg

Please see the screen grab; I’ve circled where the image is stopping. This used to extend all the way to the footer container.

Any insight or help is appreciated!

Topic

[inetinitiatives]

My apologies for adding this question on (particularly because its our own customization): I’d like to open up some space between the top utility menu (Home, Give Now, Rent Our Facilities, Stay Informed) and the main logo as when this menu line wraps on a mobile device the last item overlays the logo. I’ve messed with all the padding and margins that I could find with regard to a header widget in my child theme but I can’t get anything to register a change – any change for that matter. Am I looking in the wrong place?

[Jason Bobich]

The issue you’re showing in your screenshot would also be from your customizations, so there’s not too much I can tell you from looking at a picture. Throw up w live link and I’ll take a look.

[inetinitiatives]

cnhfoundation.org

[Jason Bobich]

Take a look at the background image you’ve created:

http://0388185.netsolhost.com/cnhfoundation/wp-content/uploads/2013/11/kiwanis-bg2.jpg

It can’t extend down because it’s one large static, non-repeating image.

I assume in your design of the background image, your intention is for it to fill that area horizontally. Right now the main container of the site is 940px wide. It would have to be styled to be 980px wide to fill what you’re doing with with that image. You can find where you’ve declared that width in your child theme’s stylesheet. Changing it 980px I think will give you the result you’re going for.

[inetinitiatives]

Wow so easy, thanks so much.

Should I move the add-on question above to a new topic?

“My apologies for adding this question on (particularly because its our own customization): I’d like to open up some space between the top utility menu (Home, Give Now, Rent Our Facilities, Stay Informed) and the main logo as when this menu line wraps on a mobile device the last item overlays the logo. I’ve messed with all the padding and margins that I could find with regard to a header widget in my child theme but I can’t get anything to register a change – any change for that matter. Am I looking in the wrong place? ”

I’m not sure if this is something that should have been added to the responsive style sheet (by putting a copy in the child theme) – or if it can somehow be modified in our child theme’s primary styles. Since this involved adding a widget area to the header is this outside the realm of help?

[Jason Bobich]

I’m not sure if this is something that should have been added to the responsive style sheet (by putting a copy in the child theme) – or if it can somehow be modified in our child theme’s primary styles.

All of your CSS customizations should be added to your child theme’s stylesheet.

By default, your child theme’s style.css is setup to be included after all the theme’s stylesheets, including the responsive stylesheet. So, anything you’re writing in your child theme sytle.css is potentially overriding anything before it.

Am I looking in the wrong place?

For CSS changes, you should be using your favorite browser’s developer tools. For example, personally I like to use Google Chrome and its dev tools. Rummaging through CSS files to find things to change realistically is a waste of time.

In Chrome, you just Right Click > Inspect on the element you want to look at it. Then, you can see the HTML structure and any other CSS currently applied. This is how you identify what selectors you could use to target different elements in your HTML, along with what else is targeting them that you may need to override.

And to get a representation of what it will like at mobile or tablet view, simply scale your browser window down smaller, and continue to look in your inspector.

---

Here’s hopefully some helpful info on writing your CSS to target specific viewport sizes from your child theme style.css —

In responsive design, we use what are called @media queries to style the elements different as we move up (or down) in viewport sizes. Specifically in our themes, what we do is style for the desktop version, and then as the viewport (i.e. screen size or browser window) becomes smaller, we make style adjustments with @media queries targeting these viewport size ranges.

However, when you come in and make your style changes, you’re now resetting things and setting up this section for the desktop. But now you also need to work your way down and make your CSS customizations for the smaller viewport sizes.

Here’s an example of how you might structure your CSS changes:

/* Applied everywhere, at all viewports */
.whatever {
	...
}
.whatever-else {
	...
}

/* Tablets and below */
@media (max-width: 991px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Mobile and below */
@media (max-width: 767px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Everything ABOVE mobile */
@media (min-width: 768px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Everything ABOVE Tablet */
@media (min-width: 992px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

[inetinitiatives]

Thanks Jason. I think I made a very easy fix, using your suggestion of identifying CSS specifically for smaller displays in a separate section of my child theme style.css.

I use Firebug quite a bit actually… however there are times when I just can’t seem to identify exactly which element is controlling what. In this case I still wasn’t able to find what – either padding or margin – of which element would allow me to add bottom padding/margin to that line of menu items. However I ultimately was able to tweak the padding surrounding the menu divider element to get everything up onto one line instead of wrapping (and therefore leaving the bottom/top spacing the same as it was).

Always appreciate your quick responses, thank you.

[Author]

Replies