When Widening Prose, Changing Sidebars & Content Width, One Sidebar Unresponsive

Community Forums Forums Design Tips and Tricks When Widening Prose, Changing Sidebars & Content Width, One Sidebar Unresponsive

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  PresterJohn 4 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #47744

    Scout
    Participant
    Post count: 2

    Hello,

    I have been working on widening my Prose template to a 1140 px width. This extra space is allowing me to widen my two sidebars and content area. I have selected the sidebar (secondary), content, sidebar (primary) Prose theme layout.

    After I have changed the CSS, the mobile responsiveness of the Prose does not appear to work completely. The center content, and sidebar on the far right (primary sidebar) will respond appropriately, but the first sidebar on the far left (secondary sidebar) will not.

    If this page was properly responding when being minimized, the third column sidebar (primary) should fall under the center content, and then the first column sidebar (secondary) should fall under the primary sidebar. The proper new mobile responsive vertical alignment would be center content, primary sidebar underneath that, and secondary sidebar on the bottom.

    However, with my coding, the secondary sidebar (located on the far left) will not properly fall under the primary sidebar content when the page is being minimized. The secondary sidebar content reacts in a different way, not properly and fully aligning underneath the primary sidebar content (which is below the center content.)

    This is the coding I am currently experimenting with:

    body {
    width: 1140px;
    }

    #inner {
    width: 1085px;
    padding: 0 00px;
    }

    #content-sidebar-wrap {
    float: left;
    width: 812px;
    }

    #content {
    float: left;
    width: 500px;
    }

    #sidebar-alt{
    width: 200px;
    float: left;
    }

    I noticed the sidebar on the left (secondary) loses its proper responsiveness when I include the following specific code:

    #content-sidebar-wrap {
    float: left;
    width: 812px;
    }

    However, I seem to need that above code to display the proper width for the template, sidebars, and content.

    Can anyone give me guidance on CSS code that will allow me to have a 1140 wide template, as well as coding that will allow me to alter the dimensions of my two sidebars and center content, and also maintain the Prose responsiveness?

    Thank you for any help you may be able to provide.

    #47945

    dev
    Participant
    Post count: 457

    Maybe try to change your ‘width:’ CSS statements to percents and see if that help. When you hard-code a pixel width, you basically nullifying responsiveness.

    Dev
    NewMedia Website Design

    #47957

    Scout
    Participant
    Post count: 2

    Hi Dev,

    Thank you for trying to help me out here. I tried substituting the width from px to percentage, but that did not seem to work either. With using percentage, the left secondary sidebar still improperly responds in the same way as I explain above.

    As I mentioned above, what is interesting, is that if I remove the below apparently problematic code…

    #content-sidebar-wrap {
    float: left;
    width: 812px;
    }

    the left secondary sidebar then becomes properly mobile responsive, and that is good. However, other formatting is then thrown off. I need that above code for everything to be visually displayed properly – with the various widths I want for the center content and sidebars.

    I was trying to find a different code than the “problematic” one to achieve the formatting I want and maintain the mobile responsiveness too, but the “problematic” code above is the only one that will give me the complete look I want. Again, that “problematic” code leads to improper mobile responsiveness for the left secondary sidebar only – the center content and right primary content are properly mobile responsive, just not that secondary sidebar.

    Please let me know any other CSS coding ideas you may have.

    Thank you!

    #47959

    dev
    Participant
    Post count: 457

    What is the URL of the site?

    #47963

    Scout
    Participant
    Post count: 2
    This reply has been marked as private.
    #104196

    PresterJohn
    Participant
    Post count: 64

    Could you share the results of this conversation?

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

You must be logged in to reply to this topic.