Community Forums › Forums › Archived Forums › General Discussion › Outreach template is off center (shifted to right) on screen
- This topic has 5 replies, 2 voices, and was last updated 10 years, 9 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
June 6, 2013 at 7:37 pm #44460skysurfingMember
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.comJune 7, 2013 at 10:59 am #44555Tony @ AlphaBlossomMemberHello,
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.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
June 7, 2013 at 2:35 pm #44635skysurfingMemberThanks 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
June 7, 2013 at 2:43 pm #44636Tony @ AlphaBlossomMemberHi 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...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
June 7, 2013 at 3:59 pm #44652skysurfingMemberHi 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
June 7, 2013 at 4:05 pm #44653Tony @ AlphaBlossomMemberHey 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!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.