Css responsive problem

HTML & CSS
1

Hi. I have a wordpress site using a responsive Genesis theme and WooCommerce plugin. The site responds well to different width browsers except one bit…

jamie.bedsofparadise.co.uk/shop/ottoman-base-special/

On the product page the summary is a float right of the product image. Unfortunately, when the screen narrows down enough to push the sidebar below the content, the content width does not narrow enough and the right edge of the summary is lost.

Whilst I understand css and can usually hack most things I am unsure when it comes to responsive design.

Can anybody help?

TIA
Jill

2

I am just trying to learn CSS based layout, so I can’t tell you what the issue is, but I have uploaded an image to illustrate your issue.

A summary of the problem would be whatever container the text is in is being allowed to expand too far when the right column of navigation is removed. Hopefully an expert will be along to solve the issue.

Rgds

3

Hi Accelerator! Nice to see you are here too!!

Yes, I know what is causing it in that the content div does not shrink correctly in being responsive, but I have just not kept up with responsive design due to illnesses. Now I need to work it out PDQ for a client.

Cheers
Jill

4

There is a web developer extension for Firefox which will show you all the div info, which might help you a bit.

5

Hi babrees. Sorry to hear you’ve been unwell.

The Content div is set to width: 100% but also has padding each side, which makes its overall width more than 100%. And because #inner is set to overflow: hidden; the overflow is hidden.

A better appraoch would be something like this:

#content {
width: 96%;
padding: 2%;
}