Outreach template is off center (shifted to right) on screen

Community Forums Forums General Discussion Outreach template is off center (shifted to right) on screen

This topic is: resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Tony @ AlphaBlossom 1 year, 1 month ago.

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

    skysurfing
    Participant
    Post count: 8

    Hello, I’ve been working on my website and the page is slightly off to the right on the computer screen with approximately 50% wider side bar on the left than on the right.  It’s not a big deal on a widescreen but I noticed on some tablets and phones, the last 1-2 letters get cut off on the right side of the screen.  You can see it on this page:  http://sky-surfing.com/scenic-introductory-flight-in-clearwater-florida/  The home page seems to be centered but the other pages are off to the right.  Is there a setting where I can change that so the right side doesn’t get cutoff on some screens?

    I’m also having issues with the header but one thing at a time.  If it’s not obvious, this is my first website.
    Thanks!

    Dane

    http://sky-surfing.com
    #44555

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hello,

    The issue is that your #content is set to a width of 100%, and you have padding set to 40px (I believe 20px for smaller screen sizes)…that is added to the 100% making the width of your content larger than it’s container.

    There are a couple of ways you can fix this. Maybe the easiest is to add this to your #content rule in your style.css (around line 618:

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    So it should look like this:

    #content {
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    float: left;
    padding: 30px 40px;
    width: 450px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    This keeps the width at 100% and places the padding inside of the content, not added to the content width. Make sure to check that it doesn’t throw off anything else inside of your content, but it should be fine.


    #44635

    skysurfing
    Participant
    Post count: 8

    Thanks for the help Tony!

    Since I’m a newbie and haven’t really done anything in the style.css before I want to double check before I make any changes.  This is what I currently have:

     

    /* Content
    ———————————————————— */

    #content {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
    border-radius: 5px;
    float: left;
    padding: 30px 40px;
    width: 450px;
    }

    .content-sidebar #content,
    .sidebar-content #content {
    width: 650px;
    }

    .sidebar-content #content,
    .sidebar-sidebar-content #content {
    float: right;
    }

    .full-width-content #content,
    .full-width-content.outreach-landing #content {
    box-sizing: border-box;
    width: 100%;
    }

    You are saying I should add those 3 lines so that it looks like:

    /* Content
    ———————————————————— */

    #content {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
    border-radius: 5px;
    float: left;
    padding: 30px 40px;
    width: 450px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    I wasn’t able to take out that space when I pasted in here but I understand I should make it look like your example.  If this is correct I will make that change later tonight after you confirm it.  I don’t see where it shows what line # so I wasn’t sure I was around line 618.

    Thanks,

    Dane

    #44636

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hi Dane,

    That should do it. Also, you can probably delete “box-sizing: border-box;” from the lower rule (.full-width-content #content,
    .full-width-content.outreach-landing #content)…just test to make sure it doesn’t mess up anything :)

    Let us know how it works for you…


    #44652

    skysurfing
    Participant
    Post count: 8

    Hi Tony,

    I made the first change you suggested and that seems to have taken care of.  Should I still get rid of box-sizing: border-box; or it that not necessary since the first one seems to have fixed it?

    Thanks for your help!

    Dane

    #44653

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    Hey Dane,

    glad I could help! It seems the second one is redundant. Personally I prefer to keep the code to a minimum so I would remove it and just check to make sure it doesn’t screw anything up, but if you’re not sure you can just leave it in.

    Have a great weekend!


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

You must be logged in to reply to this topic.