Removing Empty space from right side of page

Hi,
Im not sure at what point this white space was added but its causing some issues in both desktop viewing and mobile viewing of the site see here - http://take.ms/UrrDV

Domain - http://tinyurl.com/ounlhnf

Support Access is open

Thanks
Tom

  • Tom

    Hi Jude,
    Thanks for that it seems to have improved it i think. but when i added the footer cloud it created a similar issue, could you see if similar solution can be created ?

    issue with clouds viewed on smaller displays / mobile devices - http://take.ms/iQen7

    Also with the top menu is it possible to fix it so that all 5 icons are displayed on the same row? as there is limited space maybe the logo + Cart summary be on one row and the 5 icons below them ? so just two rows
    See screenshot - http://take.ms/toak8

    Support Access Extended to 16th Jan 2:46am
    Thanks

    Tom

  • Michael Bissett

    Hey @Tom,

    Frankly, more than one CSS adjustment is needed here, it's not a simple one to fix, in an thoroughly mobile friendly fashion. In several places, there's more than one CSS property that's shifting content to the right in a decidedly mobile un-friendly manner:

    div#primary.content-area {
        left: 50%;
        margin-right: -50%;
        transform: translate(20%, 0%);
    }
    
    .site-info {
        padding: 0%;
        left: 50%;
        margin-right: -50%;
        transform: translate(25%, 0%);
    }

    The left & margin related properties would need to be set to 0, and the transform properties would need to be set to none. It seems likely that some further CSS code would be needed, to make things a bit nicer, from my quick tests on your website.

    The cloud image is a third element that's causing the width of the page to be wider on mobile devices:

    .site-footer:before {
        content: url(http://www.boltprints.com/wp-content/uploads/2015/11/Clouds-up-1024x95.png);
        display: block;
        position: absolute;
        z-index: -1!important;
        top: -90px;
        text-align: center;
        width: 100%;
    }

    It's being inserted via the content property, it'd be preferable to do it via the background or the background-image property.

    There's still the matter of sizing it, though, I'd advise having a peek at this:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

    Also with the top menu is it possible to fix it so that all 5 icons are displayed on the same row? as there is limited space maybe the logo + Cart summary be on one row and the 5 icons below them ?

    The way the HTML's laid out prevents a complete transition to the setup you're looking for, but you will want to remove any mention of this code inside of Simple Custom CSS:

    li.menu-item {float: left;}

    And replace it with this (you'll only need one instance of this for the 768px dimensions):

    li.menu-item {display: inline-block;}

    Kind Regards,
    Michael

    P.S. Just so you're aware, we do have a policy on custom development, which can be reviewed over here:

    https://premium.wpmudev.org/manuals/using-wpmu-dev/support-vs-custom-development/

  • Tom

    Hi Michael,

    Thanks for the reply, can i just clarify a few things ?

    #1 - is this what you mean ? - http://take.ms/7qvK1
    #2 - not sure how to change it to background area ? had a look at the link and i would like to integrate it through the "cover" Scaling method. Is the code below correct ?

    <div class="bgSizeCover">
    </div>
    
    .bgSizeCover {
      height: 200px;
      background-image: url('http://www.domain.com/wp-content/uploads/2015/11/Clouds-up-1024x95.png');
      background-size: cover;
      border: 2px solid darkgray;
      color: #000; text-shadow: 1px 1px 0 #fff;

    Is it something like that added after the /* Cloud effect*/ CSS segment on lines 368-381 ?

    #3 - Removed
    li.menu-item {float: left;}
    and replaced it one time with this on line 285
    li.menu-item {display: inline-block;}
    is that correct - http://take.ms/PbuZc ?

    tried clearing cache on both PC and Mobile device, but cant see the changes, prob local cache issue, or i may have miss understood your comments could you just confirm please?

    Thanks

    Tom

  • Michael Bissett

    Hey @Tom,

    #1: Close, but transform's not been changed:

    div#primary.content-area {
        left: 0%;
        margin-right: 0%;
        transform: none;
    }
    
    .site-info {
        padding: 0%;
        left: 0%;
        margin-right: 0%;
        transform: none;
    }

    This code I've posted here is what I meant. :slight_smile:

    #2: Not seeing that code on the page, there's still the "content" property I mentioned earlier.

    This will be something that'll require some experimentation, the guide I mentioned earlier was a starting point, but this is something that you'll need to develop further. You're using Google Chrome's Developer Tools to test out changes, right?

    If not, you'll want to check out this article:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    Particularly the "Working with CSS" section.

    #3: Change that code there:

    li.menu-item {
        display: inline-block;
    }

    To this:

    li.menu-item {
        display: inline-block;
        vertical-align: middle;
    }

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.