WordPress.org

Support

Support » Themes and Templates » Responsive left and right-aligned images.

Responsive left and right-aligned images.

  • The twentyeleven theme lacked CSS code for responsive left and right aligned images. I believe I have corrected this by adding the following code to my child theme CSS:

    /* Format Images */
    
    .wp-caption.alignleft {
    		float:none;
    	}
    
    .wp-caption.alignright {
    		float:none;
    	}
    
    img.alignleft {
    		float:none;
    	}
    
    img.alignright {
    	float:none;
    	margin: 0 0 12px;
    	margin: 0 0 0.857142857rem;
    	display:block;
    	}
    
    p.wp-caption-text {
    	margin: 0 0 12px;
    	margin: 0 0 0.857142857rem;
    }
    
    @media screen and (min-width: 600px) { 
    
    	.wp-caption.alignleft {
    		float:left;
    	}
    	.wp-caption.alignright {
    		float:right;
    		margin-left:16px;
    	}
    
    	img.alignleft {
    		float:left;
    	}
    	img.alignright {
    		float:right;
    		margin-left:16px;
    
    	}
    }

    Let me know if you find additional modifications that need to be made.

    Another image issue is the lack of an attachment.php file. Copy the single.php template to your child them. Rename it attachment.php. Then your attached images will open in your theme instead of a blank screen.

Viewing 1 replies (of 1 total)
  • Moderator Michael

    @alchymyth

    Forum Moderator

    the lack of an attachment.php file … Then your attached images will open in your theme instead of a blank screen.

    Twenty Twelve has got an image.php which would do axactly that, if you link the post images to the attachment instead of the image url.

    http://codex.wordpress.org/Template_Hierarchy

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive left and right-aligned images.’ is closed to new replies.