This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: Some CSS advice

#2401
Jason Bobich
Keymaster

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.