WordPress.org

Ready to get started?Download WordPress

Forums

Need photo wider than column/text width? Possible? (8 posts)

  1. dulbie17
    Member
    Posted 2 years ago #

    I am trying to post a picture that's 1000px wide on a page on my blog, however because my column width is 900px (that's what I want my other content to be) I obviously can't. Is there any way around this? A way to post one photo larger than the rest of the text on the page? Hoping for a code to temporarily override the column width or something. ANY help would be so great appreciated!!!

  2. stvwlf
    Member
    Posted 2 years ago #

    You can set the CSS on the image to have a negative margin of 50px left and right. That will let it display 1000 px wide.

  3. dulbie17
    Member
    Posted 2 years ago #

    thank you so much for writing back!!! any ideas of what css coding I need to use? I am a css newbie.

  4. stvwlf
    Member
    Posted 2 years ago #

    need to see the URL of your site to answer your question

  5. dulbie17
    Member
    Posted 2 years ago #

    okay, it's not finished yet so it's not the real URL. can I copy the style.css coding for you here? would that work?

  6. stvwlf
    Member
    Posted 2 years ago #

    Hi

    No that won't work. Every theme is coded differently. There is no generic answer to how to style the change you are looking for. Its theme and site specific.

    Is it possible for you to reduce the size of the image to 900 pixels in an image software? That would be a lot cleaner solution. The height would be reduced proportionately.

  7. dulbie17
    Member
    Posted 2 years ago #

    oh okay!

    I could do that, but I was hoping to have the picture go to the edge of the page (it's a picture of a line) and the text stay at 900px. the picture is actually just of a line... so I want to use it as a separator on the page and it looks dumb if it just ends at 900px.

  8. stvwlf
    Member
    Posted 2 years ago #

    ok, that makes sense.

    The fastest way I've found to locate what CSS needs to be changed is to use the Firefox Firebug extension or the Chrome Developer Tools which let you pinpoint what CSS is being applied to any element on the page.

    If you're newbie to all this you might find that confusing. If you've learned your way around a bit you could try it yourself. Basically you point at the line within the tool and see what CSS is applied to it. It tells you the line number on which its applied. You can change it in the browser to see what effect that change will have. Then when you get the effect you are looking for you make it permanent by putting it in the stylesheet.

    The first thing I'd try is finding that page element and assigning a

    margin-left: -50px;
    margin-right: -50px;

    to it

    You may have to add a class name to the element that holds the line (could be an html img tag or could be used as a background image in the stylesheet, depending on how the theme is coded).

Topic Closed

This topic has been closed to new replies.

About this Topic