image with captions aligned different than those without

  • Unknown's avatar
    rlzolinas · Member ·

    I’m having a problem. I would like my images to all be aligned the same, with or without a caption. I like how the image being aligned to the left in line with the horizontal rule line. Here is the site and code. I can’t seem to find out where my problem is.

    https://applications.duq.edu/development/public-affairs/times2/category/features/

    ## Captions
    ————————————————————–*/
    .wp-caption {
    margin-bottom: 0.5em;
    max-width: 100%;
    }

    .wp-caption img[class*=”wp-image-“] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .wp-caption .wp-caption-text {
    margin: 0.5em;
    }

    .wp-caption-text {
    text-align: center;
    font-size: 11px;
    }
    /*————————————————————–
    ## Images
    ————————————————————–*/

    img.aligncenter {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    }

    img.alignright,
    img.alignleft {
    margin-bottom: 0.5em;
    }

    .centered-image {
    max-width: calc(100% + 2.8em);
    margin: 1.5em -1.4em;
    }

    @media screen and (min-width: 30em) {
    .centered-image {
    max-width: calc(100% + 3.6em);
    margin: 1.5em -1.8em;
    }

    @media screen and (min-width: 50em) {
    img.alignright {
    margin-right: -1.5em;
    }
    img.alignleft {
    margin-left: -1.5em;
    }

    @media screen and (min-width: 74em) {
    img.alignright {
    margin-right: -3em;
    }
    img.alignleft {
    margin-left: -3em;
    }

  • Unknown's avatar
    joyinco · Member ·

    Hi there,

    Looks like your site is not hosted on WordPress.COM. Please post your questions on the WordPress.ORG forum. Here is some info on the differences: https://en.support.wordpress.com/com-vs-org/

    To get to the WordPress.ORG forum follow: this link.”>this link.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I did take a quick look your site, and you have a syntax error(s) somewhere in your CSS that is causing some issues. When I place the following at the bottom of your CSS, it does not work, but if I place it at the top, it does work. I was not able to see the errors on a cursory run through. Add this at the very beginning of your CSS, right above the html rule to fix the alignment issue. 

    @media screen and (min-width: 50em) {
	.archive .entry-content {
		padding-left: 0;
		padding-right: 0;
	}
	.archive .entry-content figure {
		margin-left: 0;
		}
	.archive .entry-content .alignleft {
		margin-left: 0;
       }
}
.archive .entry-content .alignleft {
		margin-left: 0;
}

    I would suggest going through your CSS a line at a time and look for syntax errors once you have cleared those, the above CSS can be placed at the bottom of your CSS if you wish.

  • The topic ‘image with captions aligned different than those without’ is closed to new replies.