Some CSS advice

[fcampagna]

I’m looking to take the white background and some of the margin/padding off the image gallery thumbs section on this homepage. I’m not sure how to do it without impacting the white background on the element above it. Any help is greatly appreciated.

http://digitalvideoconsulting.com/2012/

Topic

[Jason Bobich]

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Here are some selectors that you can fiddle with from your Child theme’s custom.css file in terms of padding and margin in this area.

/* 1st Gallery */
.home .featured-element-2 .element-content .element-inner { … }
.home #wrapper .featured-element-2 .gallery { … }
.home #wrapper .featured-element-2 .gallery .gallery-icon { … }

/* 2nd Gallery */
.home #wrapper .main-bottom .gallery { … }
.home #wrapper .main-bottom .gallery .gallery-icon { … }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[fcampagna]

Thanks, Jason. I use Chrome to do exactly what you’re suggesting, and I’ve made many modifications to the theme, but I was having trouble drilling down to those selectors. I will check them out and hopefully get the result I’m looking for.

Awesome theme, by the way!

[Jason Bobich]

See my edits to the post above after you responded. I re-read your question and it was sort of unclear which gallery on your homepage you were referring to, so I revised.

[fcampagna]

Jason,

I’m having no luck at all using those selectors. Are you sure they’re correct for the element (in the blue section) that I’m referring to?

That’s the crux of the problem. It’s very confusing trying to figure out exactly what the element is that I’m trying to tweak.

Can you double-check it for me?

Thanks,
Fred

[Jason Bobich]

You’re talking about the first gallery on the page, right? In the featured area? I think they’re correct. This should get you pretty close.

.home .featured-element-2 .element-inner,
.home #wrapper .featured-element-2 .gallery {
	padding: 0;
	margin: 0;
}
.home #wrapper .featured-element-2 .gallery .gallery-icon {
	padding-top: 0;
	padding-bottom: 0;
}

I just tried it on your site and looks something like this:

[edit] Looking back at my original post, this:

.home .featured-element-2 .element-content .element-inner

Should be this:

.home .featured-element-2 .element-inner

Are you familiar with Chrome’s developer tools to find these things fairly quickly? When you inspect something you can take your mouse and hover over each HTML element going up/down the tree of the HTML markup and see which elements have padding/margin. I don’t think this is as easy to do in Firebug for Firefox.

[fcampagna]

Jason,

I am very familiar with Chrome’s developer tools. For whatever reason, I could not figure out that the proper tag to edit was
.home .featured-element-2 .element-inner

If you look at the site now, it looks exactly like I want it to. Thanks.

One more thing…if you resize the browser to approximately what you get on an iPhone (horizontal) you will notice that the social media icons and telephone number display over the logo. Also, the menu looks a little funky. Is there any way to make it display better on that device when held horizontally?

Thanks,
Fred

[Jason Bobich]

Aw, I got you. I didn’t realize you wanted to get rid of the white background. I guess I missed that.

I am very familiar with Chrome’s developer tools. For whatever reason, I could not figure out that the proper tag to edit was “.home .featured-element-2 .element-inner”

This not written anywhere. There are really tons of theoretical ways you could write it. This is just one way I made up looking at the effecting CSS combined with what other classes I see in the in the markup on the page.

One thing to note is that WordPress adds many classes to the tag of your site that you can use to target individually pages. Since this is the homepage, I can see the “home” class on the body. So by prefixing everything with “.home” I know we’re targeting just items on the homepage.

So in a theoretical example if you saw something like this in the theme’s CSS:

.whatever { ... }

And you wanted to change the “whatever” just on the homepage, you could come up with your own overriding CSS like this:

.home .whatever { ... }

And then you might also find this helpful, as well, for classes present with elements of the layout builder: http://dev.themeblvd.com/tutorial/styling-builder-elements/

One more thing…if you resize the browser to approximately what you get on an iPhone (horizontal) you will notice that the social media icons and telephone number display over the logo. Also, the menu looks a little funky. Is there any way to make it display better on that device when held horizontally?

You could apply the theme’s mobile styles on some of the header elements earlier if you wanted? That’d probably look nice with your logo that’s a little more large than most.

@media (max-width: 700px) {
	#branding .header_logo {float:none;margin-bottom:10px;text-align:center;}
	#branding .header-addon {margin:0;position:static;}
	#branding .header-addon-with-text {margin:0;}
	#branding .header-text {text-align:center;}
	#branding .social-media {margin:0;position:static;text-align:center;}
	#branding .themeblvd-contact-bar ul {float:none;}
	#branding .themeblvd-contact-bar li {display:inline-block;float:none;}
}

This is just copied from /assets/css/responsive.css, but applied at a larger viewport size. You can fudge around the 700px viewport size.

[fcampagna]

When I make the changes for the responsiveness of the site, should I directly edit the responsive.css file?

[Jason Bobich]

Nope. This would go along with any other custom CSS you’re inputting. And all of your CSS edits should be going in the custom.css file of your Child theme. I’m not sure if you’re just using the “Custom CSS” option temporarily, but consider moving that to the actual CSS file as you move along.

[fcampagna]

Jason,

I have tested the site in iOS on an iPad, but my client is complaining of issues when viewing on his iPhone. He sent me this screenshot.

http://i47.tinypic.com/2nlzeh4.png

The problem arises with the lightbox effect on the videos.

• This reply was modified 9 years, 4 months ago by fcampagna.

[fcampagna]

It looks to me like it’s a problem with the retina display when viewed horizontally. I tried it in the iOS simulator on my Mac and had similar issues. Any thoughts?

[Jason Bobich]

Hey can you start a new support topic about this? And I will explain and give a fix.

[Author]

Replies