Custom sidebar width in Prose Theme

[kellytuohey]

Total newbie to Genesis but I vaguely understand css, php and hooks.  I am using the prose theme and have done a bit of googling but can't seem to find an answer.  Could someone please show me how to change my sidebar width?  I realize this probably entails changing custom code somehow...

Thanks

Kelly

Bare bones website:  http://www.wholeheartedmomtog.com

 

http://www.wholeheartedmomtog.com

[rfmeier]

Kelly,

You would have to make an adjustment to your css file. Since you are using the Content-Sidebar layout, you can adjust following css.

/* style.css */
.content-sidebar #content, 
.sidebar-content #content {
width: 590px; /* edit the width */
}

.sidebar {
display: inline;
float: right;
font-size: 14px;
padding: 10px 0 0;
width: 280px; /* edit the width */
}

You will have to adjust the #content and #sidebar sizes so they work well together in the layout. Just remember if you will be using more sidebar layouts to consider editing those too.

I hope this will help or point you in the right direction.

---

Ryan Meier – Twitter

[kellytuohey]

Thank you! Ryan.  That worked perfectly!  I just had to remember to take the bracketed css stuff out...

[rfmeier]

You are welcome. Glad I could help.

---

Ryan Meier – Twitter

[kellytuohey]

Hi Ryan,

 

Not sure if you are still checking up on this, but I just realized that setting that custom sidebar width has made my entire site non-responsive.  It can't be viewed on a mobile device.  🙁  Any work around that you know of?

Thanks!

Kelly

[rfmeier]

Kelly,

Is this still happening? I checked different sizes with the browser and checked it on the phone and it looks just fine.

---

Ryan Meier – Twitter

[kellytuohey]

Hi Ryan,

I just checked on my phone - iPhone 4s, using the default Safari browser and it looks like this:

<a href="http://www.wholeheartedmomtog.com/wp-content/uploads/2013/06/image.png">screen shot</a>

It's all zoomed in and I can't pinch it out!

Hopefully that link works...

Kelly

 

[kellytuohey]

screen shot
Trying that again...

[rfmeier]

Kelly,

I got the screenshot. That is odd. Changing the width should not have affected the mobile view because the media query will override the browser version.

Did you happen to append the new widths to the bottom of the style.css file?

---

Ryan Meier – Twitter

[kellytuohey]

I added them in the custom code box only. I also am trying to add in custom google fonts and change the h1, h2, h3 styles, so I the code in there to do that (which I copied from my old site). The @import currently isn't working (boo!).

The code looks like this:

/** Do not remove this line. Edit CSS below. */

@import url(http://fonts.googleapis.com/css?family=Cardo|Cabin:700);

/* Customize the "Heading 1" text in pages and posts: */
 h1 { font-family: "Cabin:700",  sans-serif; color: #29598a; font-size:24px; font-weight:bold; line-height:105%; }

/* Customize the "Heading 2" text in pages and posts: */
h2 { font-family: "Cabin:700",  sans-serif; color: #29598a; font-size:20px; font-weight:bold; line-height:105%; }

/* Customize the "Heading 3" text in pages and posts: */
 { font-family: "Cardo",  sans-serif; color: #00000; font-size:16px; font-weight:bold; line-height:105%; text-Transform:none;}

/* style.css */
.content-sidebar #content,
.sidebar-content #content {
width: 670px; /* edit the width */
}

.sidebar {
display: inline;
float: right;
font-size: 14px;
padding: 10px 0 0;
width: 200px; /* edit the width */
}

What's weird is that the little "reader" button comes up in my address bar on my phone. When I click on it, I get the mobile version WITH the correct fonts. Maybe it has something to do with the custom fonts and not the sidebar customization?

I will try it without the font customization but it's odd that it works on your phone, but not mine!

[rfmeier]

Kelly,

Is this how the css really is within your style.css file?

@import url(<a href="http://fonts.googleapis.com/css?family=Cardo" rel="nofollow">http://fonts.googleapis.com/css?family=Cardo</a>|Cabin:700);

If so, that is most likely an issue.

---

Ryan Meier – Twitter

[kellytuohey]

Hi Ryan,

Yes, that is exactly the problem.  Now to figure out what I've done wrong in the custom font part...

Thank you!

Kelly

[rfmeier]

Kelly,

Try this instead;

@import url(http://fonts.googleapis.com/css?family=Cabin:700);

---

Ryan Meier – Twitter

[rfmeier]

Never mind. Its the message boards trying to filter the link.

---

Ryan Meier – Twitter

[kellytuohey]

🙂  No worries.  I noticed that too.  I'm off to do some research now!

[rfmeier]

Kelly,

For giggles, try clearing out your cache in Safari. I was able to test on another device and it still looks fine.

---

Ryan Meier – Twitter

[kellytuohey]

I tried clearing my cache on my phone, but it didn't work.  So weird....

I'll just leave the custom fonts off for now.

[Ajitelev]

Hello rfmeier,
i just tried the code for my site, the sidebar and content width nothing change,
have prose theme and site link http://bloggingsaga.com

[Author]

Posts