Help with responsive issue

Community Forums Forums Design Tips and Tricks Help with responsive issue

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  stefiharr 1 year, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #46470

    stefiharr
    Participant
    Post count: 47

    Hi there,

    I’m working on a site using the Going Green child theme.  I have tried not to change much at all in terms of margins, padding, widths, etc.  Any CSS I’ve put in there is above the Responsive Coding.

     

    I had to center the page and post titles so that they wouldn’t be cut off on the left.  My client may end up not wanting them that way, but it seemed like the fastest, best way to ensure it didn’t get cut off.

    On the home page, everything is shifted over to the left (text and slider).  If I remove the margin-right of 30px that I put in there, it still doesn’t help.  Any ideas on how to improve this?

     

    The sidebar widgets are actually moved over to the right a bit, and it would be nice if they were centered when on smaller devices.

     

    Everything starts looking better when on an ipad or bigger.  I’ve looked at http://www.responsinator.com/, http://ami.responsivedesign.is/, http://www.studiopress.com/responsive/ and my own phone to test it out.  It’s a pretty simple site, so I’d really like to make sure it looks good on mobile devices, which was why I chose this theme.

     

    Thank you in advance for any and all help!  The site is http://www.thegratefulbread.com/newsite.

     

     

    http://www.thegratefulbread.com/newsite.
    #46479

    csbeck
    Participant
    Post count: 135

    When going responsive, you need to watch out for the widths of div’s.

    While looking through your code, you have a setting for the footer to be 1100px. I didn’t look long enough but I’m not sure if that’s in the responsive section of your styles.css or not. If you don’t have another width setting for your footer in the responsive setting, it will maintain that width.

    Same goes for your inner div.

    I found possible issues in these style definitions:

    (I believe this one is your responsive section)
    .archive-page, .content-sidebar #content, .content-sidebar-sidebar #content, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .full-width-content #content, .goinggreen-landing #inner, .goinggreen-landing #inner .wrap, .menu-primary, .menu-secondary, .sidebar, .sidebar-content #content, .sidebar-content-sidebar #content, .sidebar-sidebar-content #content, #content-sidebar-wrap, #footer, #footer .creds, #footer .gototop, #footer-widgets, #footer-widgets .wrap, #header, #header ul.menu, #header .widget-area, #inner, #inner .wrap, #sidebar-alt, #title-area, #wrap {…}

    (again I believe in the responsive section)
    #footer, #footer-widgets, #header, #inner {…}

    (I think this is in your main section of your styles.css file)
    #inner {…}

    I would suggest editing your responsive section definitions of these styles to show no width. You might have to mess around with that setting as well as margin and padding.

    Hopefully this helps you go down the road of fixing your issue though.

    Chris

     

    #46484

    stefiharr
    Participant
    Post count: 47

    Thank you, Chris.  I’ll work on this tomorrow and hopefully it will all work out.  I may come back with more questions…but hopefully not too many :).

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.