Make images in posts wider (Spun theme)

  • lckyby · Member ·

    Just wondering how to make images wider than 600 pixels wide in Spun theme?

    I’ve seen advice to put this in the CSS but it doesn’t do anything, even when I change the size of the inserted images to ‘full size’ rather than ‘600px’

    `#site-wrapper,
    #main-nav ul ul,
    #core-content,
    #comments h3,
    legend span,
    #footer,
    .footer-content {
    width: 1200px;
    }

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi, CSS is theme specific and it looks like the code you have found is from a different theme. The following will widen the content area out to the full width of the .site-main div, which is 900px (1000px – 100px of left/right padding). 

    .single .content-area, .page .content-area, .search-no-results .content-area, .error404 .content-area, .single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
    width: 100%;
}

    After adding the above, go to the “Media Width” field below the CSS entry area and change it to 900px.

    One note on images, if the images are less than the width of the available area we have created, they will come in at the width of the image. If you upload a 700px wide image, it will be inserted at 700px wide (when inserted as a full-sized image). Images will originally have to be at least 900px in width for them to show up full width of the content area. WordPress will not enlarge them because that would reduce the quality of the images.

  • lckyby · Member ·

    Thanks.

    I see that now the text also extends to 900px though. Is there a way to keep the text at 600px and have images extend to 900?

  • thesacredpath · Member ·

    Not really since they are in the same parent div.

    Originally the content area was 700px wide, and the 600px was due to the 50px of left/right padding on the parent div. We could take away the padding but then on narrower screens the text and such would be right up against the edges of the window/device screen and hard to read. The images can only be as wide as the width of the parent div.

    I would suggest inserting images you want as wide as possible as “full-sized” instead of large. In some cases large may not be full-width.

  • lckyby · Member ·

    Ok, thanks. I changed it to 90% to compromise and because the ‘next/previous post’ arrows at the edges of the screen were getting cropped.

  • thesacredpath · Member ·

    Nice job, and you are welcome.

  • The topic ‘Make images in posts wider (Spun theme)’ is closed to new replies.