WordPress.org

Ready to get started?Download WordPress

Forums

Need help modifying css (5 posts)

  1. richards1052
    Member
    Posted 6 years ago #

    I've just introduced some css code which allows me to create specially formatted captions for my blog post images. This code worked perfectly in my former theme but the alignment between image & blue background is slightly off with my new theme.

    I was hoping someone could look at the css & tell me what I need to modify. This is the css I'm using:

    form, img {
    
    margin: 0;
    
    padding: 0;
    
    border: 0; font-size:60%;
    
    }
    
    a:hover img {border:solid red 0px }
    
    p img { padding: 0; max-width: 100%; }
    
    img.right { padding: 2px; margin: 0 0 2px 7px; display: inline; }
    
    img.left { padding: 2px; margin: 0 7px 2px 0; display: inline; }
    
    .right { float: right }
    
    .left { float: left }
    
    img.centered {display: block; margin-left: auto; margin-right: auto}
    
    .caption {
    
    margin: 4px;
    
    padding: 2px;
    
    border: 0px solid #777;
    
    background: #E5F2FF;
    
    font-size:90%;
    
    color: blue;
    
    }
  2. syrupcore
    Member
    Posted 6 years ago #

    removing the border and margin on

    .entry img

    seems to set it straight.

  3. richards1052
    Member
    Posted 6 years ago #

    I changed the code as you suggested & there still a slight misalignment between image & background (you can see it at the link to my blog post in the above comment). Here's the way the code now looks:

    .entry img{
    
    	padding: 5px;
    	}

    Should anything be different?

  4. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Since your image is defined as 383px wide and so is the containing box, adding padding to the image causes it to break out of the box.

    To fix this, I'd either:

    1. increase the containing element's width to 393px (383 + 5 + 5) it's current set inline to: <div class="caption right" style="width: 383px;">, or
    2. remove the 5px padding on .entry img
  5. richards1052
    Member
    Posted 6 years ago #

    Thanks so much. That fixed it. I removed the padding.

Topic Closed

This topic has been closed to new replies.

About this Topic