Trying to fix the post content on my homepage

  • Author
  • #1841267



    On my homepage, the last box that I made is cut off. I looked at the Triton Lite theme’s CSS and the post-content is the problem. After playing around with it for awhile, I put the following code in the CSS:

    .home #posts .post-content

    It seemed to only move the text. Is there a way to fix this? Thank you.

    Theme: Triton Lite Link:

    The blog I need help with is


    The three boxes you have, with the spacing in between, are wider than the content area, especially with a % left margin value on the far right box. I would keep them in px since Triton Lite is not a responsive width theme.

    The following increase the overall width of the theme out to 1040px with takes care of the issue.

    .container, .one-column #posts, .page-template-page-no-sidebar-php #posts, .attachment #posts, .one-column .single-page-post .post-wrap, .page-template-page-no-sidebar-php .post-wrap, .attachment .post-wrap {
        width: 1040px;


    It worked but now the nav. menu is not as centered as it was before. Is there a way to center the nav. menu without having to refigure all of my work? Thank you for your help.



    I think the formula that you gave me shifted all of my pages instead of just the homepage. That’s why everything looks uneven.


    If you want to change only the home page, then replace what I had given you with the following.

    .home .container, .home #posts, .home .post-wrap {
        width: 1040px !important;

    The menu is off center because a fixed left margin in #access was used to center it, and we have widened the home page. My suggestion would be to remove the left margin and use the following to center the menu instead as it will allow you to add or remove menu items and not have to adjust the left margin to get things centered again.

    #access {
        color: #FFFFFF;
        float: none;
        font-family: Century Gothic;
        font-size: 18px;
        font-weight: 700;
        margin-left: 0;
        text-align: center;
    #access ul {
        display: inline-block;


    Much better! Thank you very much for helping me.



    One more thing. My h1 style is centered but when you look at the page, the “Welcome to my online portfolio” doesn’t look centered. Is there a way to fix that?


    There is one more element that needs to be widened, but when it is changed, some adjustments need to be made to your inline styling in the divs in the page. The widths, and some of the margins need to be adjusted. I’ve copied what I did below for you.

    <div style="width:28%;margin-left:10px;padding:12px;background-color:#6c205e;box-shadow:10px 10px 10px #000;border:1px solid #000000;border-radius:10px;">
    <h3 style="text-align:center;color:#ffffff;font-family:Century Gothic;font-size:30px;font-weight:bold;margin-top:20px;text-shadow:1px 1px 1px 1px #000;">About Me</h3>
    <p style="text-align:left;"><em><span style="color:#ffffff;font-size:17px;line-height:24px;">I have always enjoyed working with computers, and being creative. Graphic Design is a perfect fit for me.  I first developed an interest in graphic design years ago. However, it wasn’t until the last few years that I decided to pursue this as my career. I have found that print design is what I do best. I am very focused when it comes to my work. By utilizing the training and experience I have in graphic design / marketing, I have developed the professional skills needed to be a successful graphic designer.</span></em></p>
    <div style="width:28%;margin-left:355px;padding:12px;background-color:#ffffff;box-shadow:10px 10px 10px #6c205e;float:left;margin-top:-420px;border:1px solid #000000;border-radius:10px;">
    <h3 style="text-align:center;color:#6c205e;font-family:Century Gothic;font-size:30px;font-weight:bold;margin-top:20px;">Specialty</h3>
    <h3 style="text-align:center;"><strong><span style="color:#000000;font-size:24px;font-family:Arial;line-height:30px;">PRINT DESIGN</span></strong></h3>
    <p style="text-align:left;"><em><span style="color:#000000;font-size:17px;line-height:24px;"> I love creating designs that people can not only see, but can hold and touch as well.</span></em></p>
    <h2 style="text-align:center;color:#6c205e;line-height:38px;font-family:Arial;font-size:27px;font-weight:bold;">*Flyers*<br>
    *Facebook Headers*<br>
    <h3 style="text-align:center;"><strong><span style="color:#000000;font-size:24px;font-family:Arial;">AND MORE!</span></strong></h3>
    <div style="width:28%;margin-left:700px;padding:12px;background-color:#6c205e;box-shadow:10px 10px 10px #000;margin-top:-420px;margin-right:220px;border:1px solid #000000;border-radius:10px;">
    <h3 style="text-align:center;color:#ffffff;font-family:Century Gothic;font-size:32px;font-weight:bold;margin-top:20px;line-height:16px;text-shadow:1px 1px 1px 1px #000;">My Statement</h3>
    <p style="text-align:left;"><em><span style="color:#ffffff;font-size:17px;line-height:30px;">Employers,<br>
    <em><span style="color:#ffffff;font-size:17px;line-height:24px;">As your graphic designer, I will create unique designs that meet your specific needs.  My innovative designs will promote your business in a way that will catch the attention of new potential customers.  Meeting your needs and expectations are of the utmost importance.  My job is not complete, until you are completely satisfied with the final product.</span></em></span></em></p><em><em>
    <p style="text-align:left;"><em><span style="color:#ffffff;font-size:17px;line-height:11.5px;">Thank you for your time.</span></em></p><em>
    </em><p style="text-align:left;"><em><em><span style="color:#ffffff;font-size:17px;line-height:30px;">Ebony McFarland</span></em></em></p>

    That doesn’t exactly center your h1 since we have the box shadow to the right, so you need to add a bit of right padding to your inline styling on that h1 element in your page. Here is what I came up with.

    <h1 style="padding-right: 40px;text-align:center;color:#000000;font-family:Century Gothic;font-size:40px;font-weight:bold;letter-spacing:1px;">Hi, I’m Ebony and Welcome</h1>

    And here is the additional CSS. #posts .post-content {
        width: 1040px;


    OK. Everything seems to look good. Thank you very much for your help.


    You are welcome.

The topic ‘Trying to fix the post content on my homepage’ is closed to new replies.