css cutting off part of the image in pages and posts

  • Hi everyone,

    I’m a budding wordpress designer – still learning the hard way… I was playing with the CSS of my child theme (2014 theme.

    I think I fixed the content width – Now I’m trying to stylize images in content pages and blogs – The images which are aligned left are being cut off by the left widget area. Can you check out https://collingwoodwebdesign.com/collingwood-web-design-blog/ pls?

    here’s the child theme css – Thanks!

    .primary-navigation {
    float: right;
    font-size: 13px;
    margin: 0 1px 0 -12px;
    padding: 0;
    text-transform: uppercase;
    }

    /* commented out
    .site {
    background-color: #fff;
    max-width: 1400px;
    position: relative;
    } */

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    margin: 0 auto;
    max-width: 874px;
    }

    /* for centering caption in image */

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 14px;
    padding-right: 14px;
    margin: 10px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

    p img {
    padding: 0;
    max-width: 100%;
    }
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey, jswss!

    Try adding this to your child theme css:

    .full-width .site-content blockquote.alignleft, .full-width .site-content img.size-full.alignleft, .full-width .site-content img.size-large.alignleft, .full-width .site-content img.size-medium.alignleft, .full-width .site-content .wp-caption.alignleft {
    margin-left: -68px;
    }

    This will move the image out from under the left sidebar.

    OK, you don’t have to include your CSS, because we can look at it using a web debugging tool (Firebug or Chrome Developer Tools). In fact, if you are not already using one of these, you should become an expert at it, because they will really help you see what’s going on as far as what CSS rules are being applied to a particular element.

    Try adding this rule to the end of your child theme’s style.css file:

    .full-width .site-content .wp-caption.alignleft {
   margin-left: 0;
}

    Thread Starter jswiss

    (@jswiss)

    Thanks guys – I appreciate your help – Cheers
    I tried CrouchingBruin’s solution and it works perfect. GO BRUINS GO !

    Just one other thing – The blog https://collingwoodwebdesign.com/collingwood-web-design-blog/ looks fine in IE, but in FF the TITLES of each blog post are somewhat centered as opposed to left aligned. Can you advise? Happens in FF and Chrome, but NOT ie

    And CrouchingBruin – I try to use firefly, but am somewhat confused by how it works – would you know of any good tutorials?

    Thanks guys ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘css cutting off part of the image in pages and posts’ is closed to new replies.