SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question css responsive problem

    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. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    bed-shop.jpg

    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. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a web developer extension for Firefox which will show you all the div info, which might help you a bit.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •