[Resolved] Making Content Containers Full Width on up to 1200 px

Home Forums Support Making Content Containers Full Width on up to 1200 px

  • This topic has 8 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1268350
    Megan

    Hi team!

    I have successfully removed the left and right sidebars from showing up on my site on devices up to 1200 px. I believe I worked out that this is the required break point for removing it on an iPad mini.

    However, now that the sidebars have been removed, there is a blank space where the sidebar was, and I would like to have the content container snap to a full width, as it automatically does on a phone. I would need this for both pages, which utilize the left sidebar, and posts, which utilize the right sidebar.

    Here is an image to illustrate the problem (image is of a post which is set up as content / right sidebar, but the same is an issue for pages I have set to left sidebar / content): https://www.solofemaletravelers.club/wp-content/uploads/2020/05/95982758_679124952665074_2807408735989792768_n-scaled.jpg

    While I have achieved getting rid of the sidebars with my own CSS, I haven’t managed to achieve making the container automatically full width for devices up to 1200 px.

    I hope that makes sense!

    Thankyou!

    #1268570
    David
    Staff
    Customer Support

    Hi there,

    within your CSS media query that is removing the sidebar include this CSS rule:

    #primary {
        width: 100%;
        float: none;
    }
    #1268766
    Megan

    That’s working perfectly with the right hand sidebar (thankyou!), though doesn’t seem to be making a difference to the left sidebar. I’m wondering if it’s because I’ve got the following CSS in to dictate a specific positioning of the left sidebar, and notably also have positioning directives in place for the width of page-id-13817 (this page is the only page which displays a left hand sidebar, and it’s perfect on both phone and desktop, but I can’t for the life of me get the width on an ipad to snap into place like the smaller screen of a phone).

    This is the CSS I’ve got running right now, I don’t know if it’s easy to spot why the left-sidebar command might now be working?

    I really appreciate your help, thankyou in advance!


    @media
    (min-width: 990px) {
    #left-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 14%;
    margin-left: -75%;
    margin-bottom: 400px;
    width: 217px;
    margin-right: 0px; }
    }
    .page-id-13817 .container {
    max-width: 95%;
    margin-left: 0%;
    }

    @media
    (max-width: 1200px) {
    .page-id-13817 .container {
    max-width: 100%;
    }

    @media
    (max-width: 1200px) {
    #left-sidebar {
    display: none;
    }
    #primary {
    width: 100%;
    float: none;
    }
    }
    @media (max-width: 1200px) {
    #right-sidebar {
    display: none;
    }
    #primary {
    width: 102%;
    float: none;
    }
    }

    #1268768
    Megan

    Typo in this line, should be ‘might *not* be working’

    “This is the CSS Iโ€™ve got running right now, I donโ€™t know if itโ€™s easy to spot why the left-sidebar command might *not* be working?”

    #1269109
    David
    Staff
    Customer Support

    You have several of the same 1200px media queries – the first of which is missing a closing bracket. You can combine them all into however, so try replacing your CSS with:

    @media (min-width: 990px) {
        #left-sidebar {
            position: -webkit-sticky;
            position: sticky;
            top: 14%;
            margin-left: -75%;
            margin-bottom: 400px;
            width: 217px;
            margin-right: 0px;
        }
    }
    
    .page-id-13817 .container {
        max-width: 95%;
        margin-left: 0%;
    }
    
    @media (max-width: 1200px) {
        .page-id-13817 .container {
            max-width: 100%;
        }
    
        #left-sidebar,
        #right-sidebar {
            display: none;
        }
    
        #primary {
            width: 100%;
            float: none;
            left: unset;
            right: unset;
        }
    
    }
    #1269779
    Megan

    Thankyou for cleaning the CSS up for me (I’m slowly learning)! Unfortunately it still hasn’t solved the issue with the page featuring the left sidebar and the blank space on the 1200 px sized devices. What I have realized though is that while the page container is showing up as 100%, the alignment of the page is way off. You can see what I mean in these screenshots:

    What you see when the page originally loads: https://www.solofemaletravelers.club/wp-content/uploads/2020/05/95362861_537322380508766_4439940743095648256_n.jpg

    What you see when you swipe the device left: https://www.solofemaletravelers.club/wp-content/uploads/2020/05/96413238_658499451364832_5729804900523573248_n.jpg

    Is there any overriding CSS which could essentially just make a command that for any device up to 1200 px, act in exactly the same way you would act for a phone? The phone and desktop version are perfect, though devices inbetween are caught in a weird limbo.

    I’ve just noticed too that columns don’t seem to be responsive within the theme on an ipad either, while a phone stacks them beautifully one on top of the other, medium devices stack them quite haphazardly. So if there was a command that could adjust the breakpoint up to 1200 px to mirror the responsiveness of a phone, that might solve all problems?

    Thankyou! ๐Ÿ™‚

    #1270106
    David
    Staff
    Customer Support
    #1270399
    Megan

    Perfect! That’s done the trick, thankyou ๐Ÿ™‚

    Truly appreciate your help ๐Ÿ™‚

    #1270454
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.