Support » Themes and Templates » Widen content width -Wording and Photos

  • newtocode

    (@newtocode)


    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!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    In which website do you want this widened content width?

    newtocode

    (@newtocode)

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    newtocode

    (@newtocode)

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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%;
    }

    newtocode

    (@newtocode)

    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. 🙂

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

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

    Originally it’s set to 64.99%.

    newtocode

    (@newtocode)

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    newtocode

    (@newtocode)

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

    newtocode

    (@newtocode)

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    newtocode

    (@newtocode)

    Perfect!!

    Michael

    (@alchymyth)

    Forum Moderator

    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/

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Widen content width -Wording and Photos’ is closed to new replies.