Group Admins

CBOX Classic Support

Public Group active 4 months, 2 weeks ago

This group provides support for Commons In A Box Classic, our original software for community-building. Register for an account or log in to commonsinabox.org, then join the group and post your question here.

Responsive Width on iPhones

Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 20, 2013 at 12:34 pm #3642
    Cory Piña
    Participant

    We’re using the CBOX theme, and have noticed that viewing the site on mobile phones (we’ve tried iPhone 4/5, and HTC One) renders some extra width on the right hand side outside the main content. You can see what I mean in the attachment (I hope). The image is our site on an iPhone 4 scrolled to the right to show the extra space.

    Is anyone else experiencing this?
    We can’t figure out what styles may be causing this to happen.

    Attachments:
    You must be logged in to view attached files.
    September 21, 2013 at 7:27 am #3650
    sam brown
    Participant

    We’re going from bad to worse. On iphone we are getting a big long list of all menus first then images, then left, right and central widget etc. I’ve attached a photo. The commons in a box logo is there because we were trying the child theme in an attemppt to access theme options (but no joy).

    Attachments:
    You must be logged in to view attached files.
    September 21, 2013 at 6:50 pm #3653
    Christian Wach
    Participant

    @investa You’re kind of hijacking the thread from @cory, but in your case you have broken links to many of your CSS and Javascript resources, so your page is rendering in default browser styles. I’m guessing, but it looks like whatever minifying plugin you’re using is either broken or incorrectly configured. I’d start by disabling plugins until the site is functioning, but I’d definitely start with any that mess with the CSS and Javascript first.

    Cory, can you post a link so the problem can be seen in the wild?

    September 23, 2013 at 5:04 pm #3667
    Cory Piña
    Participant

    @haystack, I’ll see what I can do. Our whole site is behind a password. Thanks.

    September 23, 2013 at 5:10 pm #3668
    Christian Wach
    Participant

    @cory the next best thing is to reduce the width of your browser window as narrow as it will go and use the inspector (in Chrome, Chromium or Safari) to see what’s causing the overflow. Often it’s something very simple but very obscure…

    September 23, 2013 at 5:27 pm #3669
    Cory Piña
    Participant

    @haystack, we have a test instance you can access.
    Here’s the URL: http://quadtest.fuller.edu

    September 24, 2013 at 7:46 pm #3678
    Cory Piña
    Participant

    So, it turns out it’s not just me.
    If you look at this very support site in a mobile device (or here for example) you’ll get the same thing. It’s the dark background bleed over on the right hand side.

    September 25, 2013 at 6:12 am #3684
    Christian Wach
    Participant

    @cory haven’t been able to grab my partner’s iPhone to test as yet… useful to know it seems to be a more general problem.

    October 7, 2013 at 8:19 pm #3733
    Matthew Lumpkin
    Participant

    Hi all. @Cory began this thread on my behalf. I’ve made some more progress but still don’t have a solution and wanted to share.

    The right side overhang in our case was caused by image width in the logo image breaking the wrapper div and extending into the <body>. In some attached images I set the background color of <body> to aqua so it is more obvious.

    Even though the responsive.css resizes the image to 80% and it doesn’t look like it’s hitting the edge, the original size of the image is what the browser counts. In my case anything larger than 305px width breaks the div. This suggests that thee left side margin of one of the divs it’s inside is subtracting 15px from the 320 device width I should have on the iphone.

    You can see this same behavior on pages like the buddy press members page where the search box also breaks the div.

    I can get it to go away on the home page by only using a logo image of 305px width or less but that doesn’t actually address the problem. I’m going to keep at it.

    Attachments:
    You must be logged in to view attached files.
  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.