[PyramidWeb]

Hi Kevin,
Your image is in a container and the width of this container is set to 660px. This container limits the width of all content on the page. That's why your image can never extend the width of 660px, even if it is wider.

To change the width for all pages, not just the one that contains the infographic image, find the following rule in your style.css file and change 660px to, say, 1000px.

.content {
    margin: 0 auto;
    width: 660px;
}

Hope this helps.

[PyramidWeb]

For me, the down arrows are blue as well (rather than white; same color as hamburger menu icon). I guess you fixed it in the meantime.

[PyramidWeb]

Hi Karen,
To the rescue: In your css, change

.home-middle .widget {
    float: left;
    padding: 0 20px;
    text-align: left;
    width: 25%;
}

to

.home-middle .featuredpost .entry {
    float: left;
    padding: 0 20px;
    text-align: left;
    width: 25%;
}

This should fix it. You might want to revise your css a bit (from my understanding, some rules in your current css merely reflect your attempt to fix the layout issue).

[PyramidWeb]

The problem: The p in "home-image" has a margin-bottom of 24px. That's why the image is not down at the bottom where it should be.

Try adding

.home-image p {
    margin-bottom: 0;
}

after

.home-image {
    display: table;
    float: left;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 45%;
}

If your current gray background image is not just a placeholder and you want to keep the dark gray background, I would recommend to use "background-color: #ff0000;" instead (replace "#ff0000" with the hex-code of your color).

[PyramidWeb]

One more thing:
If you choose Method 2, make sure you select the default style (that is, "gray") in the customizer and comment out the line that sets the background image for this default gray style

/* background: #8192b3 url('images/bg-gray-header-diamonds-right.jpg') center right no-repeat; */

Otherwise, this line will overwrite the background you set. Probably, Method 1 is the easier choice.

[PyramidWeb]

Hi there,

Method 1:
In your "style.css", search for:

.top {
	background: #8192b3 url('images/bg-gray-header-diamonds-right.jpg') center right no-repeat;
	background-size: cover;
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	color: #fff;
}

You can change the background for the "GRAY (Default Styles)" if you want to keep the possibility to change styles later on, for example:

.top {
	background-color: #ff0000;
	background-size: cover;
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	color: #fff;
}

Method 2:
Otherwise, here is another possibility: In the same "style.css", search for

.top {
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	position:relative;
}

and change it (for example) to

.top {
	background-color: #ff0000;
	width: 100%;
	padding: 30px 0 0 0;
	margin: 0;
	position:relative;
}

Hope this helps.

[PyramidWeb]

Hi stfn,
I understand what you want to achieve. I don't see the code I suggested implemented on your demo-site, hence I cannot check what's wrong.
So, can you please edit your front-page.php and style-front.css and notify me. And make sure that you registered the sidebars correctly. It is very hard to fix the problem remotely without being able to see and / or edit your current php-files and css.

Since you're on a demo-site, I can offer you to send me a private reply with temporary access data to your site so I can edit the files directly.

[PyramidWeb]

Here's the php-code again with proper formatting:

[PyramidWeb]

I'm sorry - I can't get the php-code above to the right formatting.

If I'm getting you right, you want to have a separate background color for the two widget areas at the bottom, right?

You need to put the two widget areas in the same container, to which you can then allocate your desired background color.

Try this: Change the code in your "front-page.php" as described in the code I posted above (sorry again for the weird formatting; make sure you pick the right one without certain characters replaced).

Then add to your "style-front.css" (in folder "css"):

.home-bottom {
    background: #ff1a1a;
}

Let me know if this works - I cannot test the code on your site. The wrap might need to go somewhere else.

[PyramidWeb]

<?php
function bakker_home_bottom() {
   if ( is_active_sidebar( 'home-bottom-1' ) || is_active_sidebar( 'home-bottom-2' ) ) {
      echo '<div class="home-bottom"><div class="wrap">';
         if ( is_active_sidebar( 'home-bottom-1' ) ) {
            genesis_widget_area( 'home-bottom-1', array(
               'before' => '<div class="home-bottom-1">',
               'after'  => '</div>',
               ) );
         }
         if ( is_active_sidebar( 'home-bottom-2' ) ) {
            genesis_widget_area( 'home-bottom-2', array(
               'before' => '<div class="home-bottom-2">',
               'after'  => '</div>',
            ) );
         }
      echo '</div></div>';

   }
}
?>

[PyramidWeb]

[PHP]<?php
function bakker_home_bottom() {
if ( is_active_sidebar( 'home-bottom-1' ) || is_active_sidebar( 'home-bottom-2' ) ) {
echo '<div class="home-bottom"><div class="wrap">';
if ( is_active_sidebar( 'home-bottom-1' ) ) {
genesis_widget_area( 'home-bottom-1', array(
'before' => '<div class="home-bottom-1">',
'after' => '</div>',
) );
}
if ( is_active_sidebar( 'home-bottom-2' ) ) {
genesis_widget_area( 'home-bottom-2', array(
'before' => '<div class="home-bottom-2">',
'after' => '</div>',
) );
}
echo '</div></div>';
}
}
?>[/PHP]

[PyramidWeb]

If I'm getting you right, you want to add a different background color to the two widget areas at the bottom of the page, right?

You need to put these two widget areas in the same container, which in turn can then get your desired background color.

Try this:
Change the code in your front-page.php as follows:

function bakker_home_bottom() {
   if ( is_active_sidebar( 'home-bottom-1' ) || is_active_sidebar( 'home-bottom-2' ) ) {
      echo '<div class="home-bottom"><div class="wrap">';
         if ( is_active_sidebar( 'home-bottom-1' ) ) {
            genesis_widget_area( 'home-bottom-1', array(
               'before' => <div class="home-bottom-1">',
               'after'  => </div>',
            ) );
         }
         if ( is_active_sidebar( 'home-bottom-2' ) ) {
            genesis_widget_area( 'home-bottom-2', array(
               'before' => '<div class="home-bottom-2";>',
               'after'  => '</div>',
            ) );
         }
      echo '</div></div>';
   }
}

Then add to your "style-front.css" (in "css" folder):

.home-bottom {
    background: #ff1a1a;
}

Let me know whether this works; I cannot check the code on your site. The wrap might need to go somewhere else.

[PyramidWeb]

Thank you, Dave. That solved the problem!

[Author]

Posts