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
    Forum 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
    Forum 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
    Forum 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
    Forum 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
    Forum 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
    Forum 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