Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 20, 2014 at 11:54 pm #293659
    Ria

    My quest is similar to this one: https://kriesi.at/support/topic/single-post-feat-image-position/
    I’m using a child theme. I have set the single post style “Single post with big preview image” configuration, which is fine, but what I’d like to do is place each post’s featured image as a full-screen wide image that runs 100% of screen width across the top of the post page, rather than the image be constrained by the width of the container.

    I thought to take the line of code that generates the featured image out of the “container” div and move it up to be inside the “container_wrap” div (above the container div) on single.php, however it seems that the featured image is generated by the loop-index.php and I can’t sort out within the loop-index.php code what code I need to move. I wasn’t able to learn much from the post (mentioned above) since the helper did the code for the poster and I couldn’t tell what he’d changed. I suspect that this isn’t too difficult, but I just can’t seem to figure out which line(s) of code to move?

    ( I can do all the CSS styling stuff to make it look the way I want it to on the page, just need to know how to get the image moved up there )

    July 21, 2014 at 9:07 am #293744
    Ismael

    Hi Riavon!

    Thank you for using the theme.

    It’s actually not possible without modifying the theme files but I tried to recreate what you want via CSS:

    .template-single-blog {
width: 100% !important;
}

.template-single-blog main.content.units.twelve.alpha {
	width: 100%;
}

.template-single-blog main.content.units.twelve.alpha article > *, .template-single-blog main.content.units.twelve.alpha > * {
	width: 1030px;
	margin: 0 auto;
	float: none;
}
 
.template-single-blog main.content.units.twelve.alpha article .big-preview.single-big, .template-single-blog main.content.units.twelve.alpha article {
	width: 100%;
}

    You need to use media queries to change the width of the blog post content.

    Best regards,
    Ismael

    July 21, 2014 at 6:32 pm #293954
    Ria

    I think I’ll see if I can figure out how to build a custom post type or customize the single.php template for my child theme. Thanks!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How do I make the Single Post with full-screen wide Featured image?’ is closed to new replies.