Support » Theme: Hum » Getting image to span the whole content area

  • Resolved lots0meat


    I am trying to post an image to a static page that will span the whole content area (single column content area). Any help would be awesome. Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • This is a screen shot from the Hum Theme description. The picture of the light house spans the entire content area. This is the effect I want to achieve.

    Please post a link to your site for help with formatting/CSS questions.

    unfortunately my site is on a local server right now so there is no link. Is there another way to show you y site?

    In your theme’s CSS, try:

    .page-id-number img{

    The “.page-id-number” is written:
    “.page-id-(put the number of the page you want here – i.e. 2 or 45 or whatever it is)

    Thanks for the reply. Unfortunately, it didn’t work. As I understand, it doesn’t matter where in the CSS I place it, is that correct?

    I found this in the CSS code

    #content article.format-image .entry-content > :first-child {
    	margin: 0 -8.96226415%;
    	max-width: 117.924528%;
    	width: 117.924528% !important;
    	padding: 0;
    	overflow: hidden;

    It seems like this can be of some use to me. Any thought?

    What theme are you using?

    Twenty Eleven, Child Theme: Hum

    I don’t have 20-11, only the latest 20-12 and 20-13, so I can only go by 20-12’s templates and I’m assuming you’re using the “content-page.php” template.

    In 20-12’s CSS (…which may be the same as 20-11’s), there is this:

    /* Responsive images */
    .entry-content img,
    .comment-content img,
    .widget img {
    	max-width: 100%; /* Fluid images for posts, comments, and widgets */

    …just after it, try:

    .page-id-number .entry-content img{
    #content {
        width: 100%;
        margin-left: 0%;

    I entered this code below the “Standardize One-Column” section near the top of my CSS sheet for the child theme. Worked nicely.

    I also edited these % values

    .hentry header {
    	padding: 1.625em 4% 0;
    #content .hentry .entry-content {
    	padding: 0.6em 4% 0;
    	border-style: solid;
    	border-color: #eee;
    	border-width: 0 0 1px;

    Thanks for giving me some ideas. Cheers.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Getting image to span the whole content area’ is closed to new replies.