WordPress.org

Ready to get started?Download WordPress

Forums

Hum
[resolved] Getting image to span the whole content area (10 posts)

  1. lots0meat
    Member
    Posted 11 months ago #

    I am trying to post an image to a static page that will span the whole content area (single column content area). Any help would be awesome. Thanks!

  2. lots0meat
    Member
    Posted 11 months ago #

    This is a screen shot from the Hum Theme description. The picture of the light house spans the entire content area. This is the effect I want to achieve.

    http://wp-themes.com/wp-content/themes/hum/screenshot.png

  3. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Please post a link to your site for help with formatting/CSS questions.

  4. lots0meat
    Member
    Posted 11 months ago #

    unfortunately my site is on a local server right now so there is no link. Is there another way to show you y site?

  5. ModularBase
    Member
    Posted 11 months ago #

    In your theme's CSS, try:

    .page-id-number img{
    width:100%;
    height:auto;
    }

    The ".page-id-number" is written:
    ".page-id-(put the number of the page you want here - i.e. 2 or 45 or whatever it is)

  6. lots0meat
    Member
    Posted 11 months ago #

    Thanks for the reply. Unfortunately, it didn't work. As I understand, it doesn't matter where in the CSS I place it, is that correct?

    I found this in the CSS code

    .full-width,
    #content article.format-image .entry-content > :first-child {
    	margin: 0 -8.96226415%;
    	max-width: 117.924528%;
    	width: 117.924528% !important;
    	padding: 0;
    	overflow: hidden;
    }

    It seems like this can be of some use to me. Any thought?

  7. ModularBase
    Member
    Posted 11 months ago #

    What theme are you using?

  8. lots0meat
    Member
    Posted 11 months ago #

    Twenty Eleven, Child Theme: Hum

  9. ModularBase
    Member
    Posted 11 months ago #

    I don't have 20-11, only the latest 20-12 and 20-13, so I can only go by 20-12's templates and I'm assuming you're using the "content-page.php" template.

    In 20-12's CSS (...which may be the same as 20-11's), there is this:

    /* Responsive images */
    .entry-content img,
    .comment-content img,
    .widget img {
    	max-width: 100%; /* Fluid images for posts, comments, and widgets */
    }

    ...just after it, try:

    .page-id-number .entry-content img{
    width:100%;
    height:auto;
    }
  10. lots0meat
    Member
    Posted 11 months ago #

    #content {
        width: 100%;
        margin-left: 0%;
    }

    I entered this code below the "Standardize One-Column" section near the top of my CSS sheet for the child theme. Worked nicely.

    I also edited these % values

    .hentry header {
    	padding: 1.625em 4% 0;
    }
    
    #content .hentry .entry-content {
    	padding: 0.6em 4% 0;
    	border-style: solid;
    	border-color: #eee;
    	border-width: 0 0 1px;
    }

    Thanks for giving me some ideas. Cheers.

Reply

You must log in to post.

About this Theme

About this Topic