Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Dan-Thomas Tveita
107 PointsFull width content images inside fixed container
Is it possible to have full-width (full viewport stretched) images inside a wordpress template, but have the surrounding content (text etc) be constrained to a fixed width?
An example is the way this article is laid out:
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn
(text content is centralized, while post-images are streched to edge of screen)
I guess the simple question is, if its possible to tell images to stretch to the viewport-width, even though the images are inside a center-aligned fixed container?
4 Answers
Dan-Thomas Tveita
107 PointsIm fully aware that theverge.com is not a wordpress site btw :)
Quang Nguyen
2,235 PointsHi Dan-Thomas,
The design of this site is very similar to the one that I learned from my Front End Web Development Track, the CSS Basic section.
Here is how I stretch the image proportionally throughout the page and center the text:
Assume this will be the main header section of the page's HTML structure. Also I use this design from the Verge as my example.
<body>
<header class="main-header">
<h1>The Changeup</h1>
<span>How baseball’s tech team built the future of television</span>
<span>By Ben Popper</span>
</header>
</body>
Next comes the CSS styling.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
img {
max-width: 100%;
margin-bottom: 20px;
border-radius: 10px;
}
.main-header {
padding-top: 170px;
height: 850px;
background: url('the background image's directory goes here') no-repeat center;
text-align: center;
}
I know this method is not Wordpress-related, because I have not learned that far yet; however, the design that you showed in your question is very similar to what I learned, so I just wanted to share and contribute with you. I hope this info will help. Cheer!
Dan-Thomas Tveita
107 PointsHi, thanks for answering. But i dont see how this solves anything.
Post images located inside a text, are supposed to stretch full width, while the text above and below are constrained to a fixed with... like the theverge. Im not talking about a header, which has a container of its own. Im talking about post images that are inside the same container as the text itself.
Quang Nguyen
2,235 PointsI am sorry for not being able to help you solve this issue, since I have not learned about Wordpress yet. My sincere apology.
Dan-Thomas Tveita
107 PointsI found this: http://codepen.io/Mest/pen/oKBIu
But when doing it on an img instead of a div, im getting a horizontal scrollbar. Any ideas why? And anyway to make this trick (vw) work with images as in the codepen example?