[frobn]

Try Geekghost.net. Their headquarters is in Tampa with servers in Tampa and Europe. Hosting is inexpensive, can be purchased on a monthly basis and support is superior.

[frobn]

It looks like you need to crop the top of the original image or adjust the background position.

[frobn]

Set the max-height of front-page-header

Example:

 .front-page-header
{
  max-height: 500px;
  max-width: 100%;
}

[frobn]

You lost responsiveness. You can test it as http://www.studiopress.com/responsive/. In my original post I was trying to avoid changing the widths. View the css on other child themes that are closer to the look and feel you are trying to achieve, I think eleven40 comes closest to what you want. But since the child themes are built on the same code base I think they are likely to have more distance than you like between content and sidebars.

BTW you are right it is better to use percentage or em for the widths. In some of the newer themes font-sizes are given in both px and rem. I am working on a couple of custom themes with padding, margins and media queries in em's.

[frobn]

Chris as I said your code is good. There are different ways to approach a problem. You solved the problem by removing code which was excellent and yes it is better to remove the offending code. I was able to get the code to work using Web Developer but since I did not have access to the actual css and was limited and from what I could determine !important was being striped. Thank you solving the problem.

[frobn]

It was an interesting journey, I wish was able to duplicate the problem, there is always a solution if you can dig deep enough. Please let me know if you find an answer.

@Chris

Your code is good, but solves a different problem. The solution calls for the background-color to be #fff and to accomplish that the background of .nav-secondary a needs to be #fff. That the code did not work was not that it was incorrect but that some how !important got stripped out or ignored. If you can figure out why you can solve the problem.

[frobn]

How the widgets appear depends on the styles in the child theme.

This will change the widget background to white and correct the padding.

.sidebar-primary
{
  background-color:#fff;
  padding-left:10px;
}

BTW it looks like you have an empty text widget at the top.

[frobn]

I ran out of suggestions. Something internal to the site is preventing the rendering of !important in your styles.

Found in your style sheet:

.header-image .site-title a {
	background-position: center !important;
	background-size: contain !important;
	float: left;
	display: block;
	min-height: 175px;
	text-indent: -9999px;
	width: 100%;
}

Viewed with Web Developer:

/* Line 1285 */
.header-image .site-title a
{
  background-position: center center;
  background-size: contain;
  float: left;
  display: block;
  min-height: 175px;
  text-indent: -9999px;
  width: 100%;
}

What happened to !important? My guess is that the problem lies with the wp editor. Even though you deactivated the visual editor it may have left something changed. I vaguely recall reading that an earlier version of wp had a problem with !important.

[frobn]

In thinking about it it would probably be better to insert Genesis Theme Settings in the "Head and Footer Hooks.

I don't know if it will work but its worth a try.

<style>
<!--
  .nav-secondary a,
.genesis-nav-menu {
background-color: #fff !important;
color: #000 !important;
}
-->
</style>

If there is a conflict with one of your plugins then the inserting the style in the footer hook will load it after all other js and css is loaded.

[frobn]

I have to keep in mind, for future reference, that styles may not work as intended on a mac.

[frobn]

It's weird. I checked your style.css and found it ok but when I use Web Developer to check your code I see:

/* Line 1461 */
.nav-secondary a, .genesis-nav-menu
{
background-color: #ffffff;
color: #000000;
}

When I insert the code in via Web Developer it works perfectly.

A couple of things to try: Disable visual composer and if you are using genesis simple hooks try inserting the style before the </body> or in the <footer>.

[frobn]

I see a 100px border-bottom color #b6bf00 in FF and in Chrome. What browser are you using?

[frobn]

Try:

.front-page-1 {border-bottom:100px solid #666 !important;}

I tested in firefox with Web Developer and it appears to work.

[frobn]

Which child theme(s) have the solution that you are trying to achieve?

[frobn]

Pixels don't resize accurately. Try using "min-height: 4.1em" which is close to 65px.

If you provide a link it would help to see the problem.

[frobn]

Thy this in style.css.

.widget { margin-top: 1.5em; }

[frobn]

You are doing pretty good for a beginner. Try what I suggested. The way to learn css is to experiment with it. Use W3Schools to learn more .

CSS Margin - W3Schools They have a sand-box for each selector so you can see what happens when you can test various examples.

The media queries are used to adjust code at different breakpoints for mobile devices. Padding may differ from the desktop settings. Thinking about it I don't think it will make any difference with what you are doing.

[frobn]

I tested it on firefox using Web Developer

Looking at your css !important is missing.

This what I see:

.nav-secondary a, .genesis-nav-menu
{
  background-color: #ffffff;
  color: #000000;
}

Try it this way:

.nav-secondary a,
.genesis-nav-menu {
    background-color: #fff !important;
    color: #000 !important;
}

[frobn]

You can manipulate the padding and margin to close the space. You may also need to make changes in media queries.

example:

.content .entry
{
  padding: 20px;
  margin-right:-10px
}

[frobn]

Swap the colors to any that you want.

.nav-secondary a,
.genesis-nav-menu {
    background-color: #fff !important;
    color: #000 !important;
}

[Author]

Posts