Hi All,

 

I am new to this forum so I introduce myself. Donald from Ireland. I am not a web designer. I know basic html and css but not so expert.

 

I am helping a friend who owns a website http://www.carpetcleanersdublin.ie, and it runs Genesis Framework (just in case you asking) on top of Wordpress (latest version). Website is fine but I am having an issue with the Home page Sidebar. I am explaining better below.

 

This website before was not HTML 5 so I thought to modify into it. I added the function to activate html 5 into the file function.php and I used a free online application that "translate" the old style.css into a new style.css for HTML 5.

 

The only issue I can see is the right sidebar in the home page. It seems oversized and I don't know how to resize it.

 

For example I can see that sidebar-home size is set to 940 x 950 px and I think it is wrong size as it should be maybe 300 or 350 px in width?

 

Consequently all text widget added into the right sidebar (sidebar-home) are oversized.

 

How can I resize the sidebar home into style.css? Is that possible that translating the old style.css into the new style.css , something has been lost in translation?

 

I attach also the screenshot with the issue I am having.

 

Thanks in advance,

Please let me know if you need any code.

 

Donald

 

Welcome to the forum

At first glance, you need to float the content and sidebar and to give them a width.

 

The theme is not responsive, so you can use fixed width. In your style.css add the following:

#content{width: 600px; float: left;}
#sidebar-home{width: 280px; float: right;}

That should look like the attached. Hope that works for you

 

Edited June 20, 201412 yr by teodora

Thanks for your help!

 

I attach you a screenshot when I modified the style.css

 

Not sure why it behaves like this.

 

I tested in Firefox and it works but in Chrome it is as in the pic attached.

 

===Update===

If found in the style.css this code:

.content {
	width: 500px;
	margin: 0 0 10px 0;
	padding: 20px 10px 0 10px;
	float: left;
	}

So I modified in # instead of .

It seems that now works in Chrome too.

 

Is what I did correct?

Thanks

Edited June 20, 201412 yr by donnyb

Could be because you need to float the sidebar, too?

#sidebar-home{width: 280px; float: right;}

Thanks for your reply,

 

 

===Update===

I tweaked some bits and pieces into style.css and now works also in IE.

My only question at this stage is if .content modified in #content helped or not.

============

 

I tried already to put this line :

#sidebar-home{width: 280px; float: right;}

since start, following your advice. But I found that it doesn't work with Chrome browser.

 

I found that putting the following code, on top of the one above worked:

#content {
	width: 500px;
	margin: 0 0 10px 0;
	padding: 20px 10px 0 10px;
	float: left;
	}

Not sure why but it works now with Chrome and Firefox. Unfortunately with IE it doesn't work well.

I am just wondering if the code above is correct and the one I needed to modify

Thanks

Donald

Edited June 21, 201412 yr by donnyb