[Hard Boiled Greg]

There may be others that work. The key is to hook into something that is called before the action you want to take.

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Line 2248 of your stylesheet:

.site-header {
position: absolute;
}

Is overriding the rule to make the header position static at widths 680px and below (line 2089)

The position absolute: rule is in a section of the stylesheet with the heading "Site customizations for Citizen Baker"

The purpose of it isn't readily apparent to me. I think you could safely delete it.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Have you hooked that function in?

Try adding:

add_action( 'genesis_meta', 'homepage_fullwidth' );

right before the function.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

The middle widget area is coded to show to posts/pages side by side and the bottom widget area is coded to show posts/pages one per line. However, there is nothing stopping you from added more than one featured content widget to the middle widget area to achieve multiple categories/sections with two posts/pages side by side. You could leave the bottom widget area empty.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Speedmouse,

Could you share a link to your site? Also, what do you mean by "Ideally I’d like them to be in pairs as the posts show up"?

Thank you,

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Linda,

Could you share a link to the site?

Thanks,

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

The width of the primary sidebar is set on line 551 of the CSS file. If you increase it you will likely have to reduce the width of the content (line 528)

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi,

In your WordPress dashboard, under the Genesis menu, click on 'Theme Settings'. Under the 'Navigation' section click the checkbox for "Enable Extras on Right Side" under 'Primary Navigation'. You will see a drop down which will let you select to display a search form.

Hard Boiled Greg

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

If you log into your "my.studiopress" dashboard and click on "Get Started" beside the News theme, you'll find these instructions right at the top: "How to Create Social Icons in the Navigation"

Hard Boiled Greg

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

If you find this rule in your CSS (line 1563):

.home .more-link {

you can edit the 'bottom:' setting to move the read more link around. Try -15px.

Hard Boiled Greg

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi,

There is probably more than one way to resolve this, but here is some CSS that should help fix it.

Add

position: relative

to .featured-top

Remove

float: left

from .slider

Change .property-quick-search to:

border: 10px solid #fff;
	min-height: 260px;
	overflow: hidden;
	padding: 20px;
	width: 240px;
	z-index: 10;
	position: absolute;
	top: 15px;
	right: 15px;

You may want to add a background to the search box as it is showing the slider through. Actually a semi-transparent white would look good, or change the text to white and go with a semi-transparent black.

Let me know if you have trouble with this.

Hard Boiled Greg

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

You're welcome!

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

To fix the nav menu change:

#header {
        min-height: 318px;
    }

to

#header {
        height: auto;
    }

where we added it in the (max-width: 960px) area.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Krystyn,

Your logo is left aligned at 960px and less. If you add 'margin: 0 auto' to your #title rule it will be centered.

Up to your preference of course.

Greg

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Krystyn,

When I increase my browser width, it’s like the logo is pinned to the right side of the screen.

This is not supposed to be like this. I think you missed adding 'position: relative' to your .wrap rule. Adding this will fix it.

Now lets look at narrow screen sizes. Your "desktop design" is two columns (content and sidebar) and we've set up the CSS to position your logo in the "right column". When viewing the site on a tablet or mobile phone, your theme reduces to one column. You as the designer/developer need to determine how you want your layout to be on these devices.

One option would be to position the logo top center, with the menu below it, and then the main content. Your theme does this out of the box, but we made some changes last time to get the full-width view the way you want, so we need to add CSS rules to "put things back" at narrower screen sizes.

The StudioPress style sheets group the mobile responsive CSS rules at the bottom. If you open your style sheet and scroll to the bottom you will see settings for various max-widths ie:

@media only screen and (max-width: 960px) {
                     /* Various CSS Rules */
}

The code inside the above rule is only "used" when the screen has a width of 960px or less.

If you place the following code:

.header-image #title-area,
    .header-image #title,
    .header-image #title a {
        position: relative;
    }

 #header {
        min-height: 318px;
    }

inside that area, it will display your logo top center, followed by nav and content when the screen is 960px or less.

If you want a different layout than that on those screen sizes, then you will need to apply different rules. This is just one solution.

Additionally, you may need to specify an alternate logo image for really small screens if your existing logo is too wide.

You can try applying those changes and let me know what you think.

If you have any questions or need better clarification, please do not hesitate to let me know.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Krystyn,

Just wanted to let you know I've seen your post. I have to run a few errands and I'll be back later to help you finish this off.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Aaah, you edited your post; I didn't see that.

Change #header 'min-height: 318px' to 'height: 50px' and remove 'overflow: hidden'

To .wrap add 'position: relative'

Change your CSS to this:

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	height: 318px;
	overflow: hidden;
	padding: 0;
        position: absolute;
        right: 0;
	text-indent: -9999px;
	width: 300px;
}

To .sidebar add 'margin-top: 290px'

Now you should be all setup for desktop screens. As the browser width decreases the above changes are going to need to be "undone" and new rules applied to their respective @media screen sizes depending on how you want it too look on those devices.

Please leave a post here if you need help with that.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

(P.S. Put the menu back in the header widget. We can make the space below it go away)

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Krystyn,

I started to look at it and then refreshed and it changed. I think you are still making adjustments. Just make another post when you need a hand. 🙂

Greg

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Hard Boiled Greg]

Hi Krystyn,

The title area has left float and the header widget has a right float. The first step will be flipping those around and then fiddling with positions and margins to get everything where you want it.

I'll leave you to it for now. If you can't get it how you want it, just post in this thread (I'm subscribed) and I'll help you out.

Take care,

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[Author]

Posts