WordPress.org

Ready to get started?Download WordPress

Forums

Widen content width -Wording and Photos (15 posts)

  1. newtocode
    Member
    Posted 1 year ago #

    Hi Everyone,
    You guys have helped me so far...I've been searching the forums a lot...

    I made a child theme using the Coraline theme as my parent. I want to widen my main content area width to look like this: http://bleubirdvintage.typepad.com

    So far I have widened the main content area margin and the side bar to line up like the website I've showed you. However, I am UNABLE to have the actual post content line up like the website I've showed you. I want the writing and images to fill up the whole width up to the sidebar like shown in the above link.

    Does anyone know the code or what I should edit to achieve that look?

    Thank you so much!

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    In which website do you want this widened content width?

  3. newtocode
    Member
    Posted 1 year ago #

    Right now I'm just using the basic Coraline theme. I'm fooling around with the CSS preview option. None of these codes have actually been applied. I didnt want to purchase the CSS upgrade if I wasnt sure I could achieve this look.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    It's difficult to envisage your issue, can you link the problematic web page?

  5. newtocode
    Member
    Posted 1 year ago #

    None of the margin code that I have spoken about is applied because I did not pay for the CSS upgrade yet, so you cant view any changes. Im only checking this all in the free preview option.

    Thanks.

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Assuming you're using a Child Theme or have a Custom Style/CSS plugin, you need to change the containing element's width;
    E.g add

    .two-column #container {
     max-width: 970px;
    }

    Then find out how the image width is set and expand that to 630 pixels (width). It's probably in the dashboard somewhere.

    If you want the <header> element to keep its original size, try setting the width to 75% and removing float: left;.
    E.g

    #header {
     float: none;
     width: 75%;
    }
  7. newtocode
    Member
    Posted 1 year ago #

    Thanks Andrew. I have the container max width changed - that's what I originally changed to have the margins wider. I have it set at 1000px

    The problem I'm running into is I cant get the actually content...the post writing and images to enlarge and fill that area.

    I couldnt find the image width option in the dashboard - its very possibly I missed it though.

    Any idea how to make the writing fill that whole content area?

    Thanks again. :)

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Expand <div id="content">
    E.g

    .two-column #content {
     width: 75%;
    }

    Originally it's set to 64.99%.

  9. newtocode
    Member
    Posted 1 year ago #

    Yes! That worked! The writing is now filling up that whole margin area. Any idea how to make that work for the photos as well ?

    Thank you!!!

  10. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Changing the photo width with CSS will stretch the photo. You need to find where the image size is being defined, search the forums for similar issues.
    I don't know where the image size is defined.

  11. newtocode
    Member
    Posted 1 year ago #

    Okay thanks. I'll keep searching. You've been so helpful!!!

  12. newtocode
    Member
    Posted 1 year ago #

    This is unrelated, but do you know how to remove the lines above and below the header?

  13. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Two lines are added via CSS on the image;

    #branding img {
     border: 1px solid black;
    }

    Another line is added via CSS on the navigation;

    #access {
     border-top: 1px solid #CCC;
    }

    You can find which styles are applying to which elements by using an Inspector tool, such as Google Chrome's built-in Inspect Element or Firefox's FireBug tools.

  14. newtocode
    Member
    Posted 1 year ago #

    Perfect!!

  15. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I didnt want to purchase the CSS upgrade

    this sounds as if your site is with WordPress.com - in which case, please ask at http://en.forums.wordpress.com/

    this forum here is specific for WordPress.org - the difference http://en.support.wordpress.com/com-vs-org/

Topic Closed

This topic has been closed to new replies.

About this Topic