[Twenty Twelve] CSS Property Values Around Images Not Working

  • In my child theme my code has been set to:

    img.alignleft {
    margin-top: 14px;
    margin-top: 0.957142857rem;
    margin-bottom: 14px;
    margin-bottom: 0.957142857rem;
    margin-right: 14px;
    margin-right: 0.957142857rem;
    margin-left: 0;
    margin-left: 0;
    }

    img.alignright {
    margin-top: 14px;
    margin-top: 0.957142857rem;
    margin-bottom: 14px;
    margin-bottom: 0.957142857rem;
    margin-right: 0;
    margin-right: 0;
    margin-left: 14px;
    margin-left: 0.957142857rem;
    }

    img.aligncenter {
    margin-top: 14px;
    margin-top: 0.957142857rem;
    margin-bottom: 14px;
    margin-bottom: 0.957142857rem;
    }

    Because incorporating the code into a single line for all four sides of an image appeared not to be working. I know that the border properties for images goes in a clockwork fashion around it starting from the top. e.g. Top, Right, Bottom, Left for css border properties.

    So css should something look like this:

    img.left {
    margin: 14px 14px 14px 0;
    margin: 0.957142857rem 0.957142857rem 0.957142857rem;
    }

    Similar for the right but switched around to meet the order of the border properties obviously.

    This isn’t working though? For example if you look at the right ligned image on the page bwlow, you will still see that the 14px is going over to the right of the image, so it’s not in lign with my justified text on the page and there appears to be no 14px border to the left of the image as there should be.

    I can’t figure out why the above css properties are not working in my child theme and the whole point of me tweaking such was to be able to design borders around each image to make them look like photos with a white borderr aroud the edge.

    I stripped out that code until I can resolve the above. Would be really grateful if someone could give me clues as to why the code is not working for me by checking out the layouts on the page and checking any css issues there may be that affect it.

    Even when I default to what is set in Twenty Twelve there is insufficient border on the right aligned images and they are still not aligned, so it looks as if it is a css issue coming with the template itself. I’ve tried placing my code above into the original css template but that doesnt work either???

    Cheers,

    https://www.thebridesboudoir.com/category/plan-a-wedding/

Viewing 1 replies (of 1 total)

  • When you insert image in editing screen, make sure you select the alignment correctly. Right now at the page you linked to there is no .alignleft class in the source.

    Also, if the image is inserted via a plugin, then you have to see if it honors the class you put in or it has its own system, whatever it is make sure you got the class match what you have in CSS.

    So css should something look like this:

    img.left {
margin: 14px 14px 14px 0;
margin: 0.957142857rem 0.957142857rem 0.957142857rem;
}

    Might be a typo (just missing last zero value), but if used like that with only 3 values, the second value will be used for left and right, the last will be used for bottom.

Viewing 1 replies (of 1 total)
  • The topic ‘[Twenty Twelve] CSS Property Values Around Images Not Working’ is closed to new replies.