Thank you for answering my presale questions! I have bought the theme! Can’t wait for buddypress to work with it 🙂
I would like to change the height of the full post featured image on the home page as well as changing the height of the image on post style #6.
Is this possible?
Hi,
Please try this custom css in Theme Panel > Custom Css for homepage post block: http://screencast.com/t/5OjyBw3n7cQP
.page .template6-header {
top: 900px;
}
.page .td-full-screen-header-image-wrap, .page.single_template_6 .td-header-wrap {
height: 1000px !important;
}
.page .td-full-screen-header-image-wrap .backstretch{
height: 1000px!important;
}
.page .td-full-screen-header-image-wrap .td-backstretch{
height: 1000px!important;
}
.page #td-full-screen-header-image{
min-height: 1000px;
}
Also for post template 6:
.single .template6-header {
top: 900px;
}
.single .td-full-screen-header-image-wrap, .page.single_template_6 .td-header-wrap {
height: 1000px !important;
}
.single .td-full-screen-header-image-wrap .backstretch{
height: 1000px!important;
}
.single .td-full-screen-header-image-wrap .td-backstretch{
height: 1000px!important;
}
.single #td-full-screen-header-image{
min-height: 1000px;
}
.single_template_6 .td-header-wrap {
height: 1000px;
}
Hope this helps!
Thank you for the very fast response. The front page code worked wonderfully.
The page code left a lot of white space under the featured image and before the post body: http://i61.tinypic.com/9r7r49.jpg
.single .template6-header { top: 500px; } .single .td-full-screen-header-image-wrap, .page.single_template_6 .td-header-wrap { height: 500px!important; } .single .td-full-screen-header-image-wrap .backstretch{ height: 500px!important; } .single .td-full-screen-header-image-wrap .td-backstretch{ height: 500px!important; } .single #td-full-screen-header-image{ min-height: 500px; } .single_template_6 .td-header-wrap { height: 500px; }
Also the featured large image on the homepage is showing the most recent post and not the latest featured.
Hi,
1. I tested this with your code and works fine on my side: http://screencast.com/t/sVtMWWwxdqW
Please provide a link so I can provide an accurate solution.
2. I also tested this and show the latest post on homepage post: http://screencast.com/t/asssE6LHGta
What settings did you used? Please provide more details.
Thanks!
can I private message you the URL?
#2 taken care of. I must have not clicked update when I changed the settings.
Thanks.
In different screen sizes the image seems stretched. Is there a way to not make the height a fixed height but ratio?
I usually do height:auto
Thanks Chris. Yeah that is what I tried and it didn’t seem to work.
Hi,
Please try to remove this part from above custom css and it should work fine:
.single .td-full-screen-header-image-wrap .td-backstretch{
height: 500px!important;
}
Thanks!
Nope. Didn’t work. I think I have tried about everything :). To get an idea of how the image should be responding please take a look at Vice.com and play with the browser size. http://www.vice.com/ the image height is responsive.
With the code above the height is fixed.
Hi,
We will consider adding another implementation and also consider your suggestion if we decide to change this feature in future updates. Meanwhile you can use it as it is or you could also try to find and use a plugin for this.
Thanks for the message!
Sorry for the inconvenience!
This codes seems to do the trick:
.page .template6-header {
top: 500px;
}
.page .td-full-screen-header-image-wrap, .page.single_template_6 .td-header-wrap {
height: 500px !important;
}
.page .td-full-screen-header-image-wrap .backstretch{
height: 500px!important;
}
.page .td-full-screen-header-image-wrap .td-backstretch{
height: auto!important;
}
.page #td-full-screen-header-image{
min-height: 500px;
}
However, the article title text and info does not resize with it. So on mobile the title text and other text is below the image. Fix for that?
Hi,
I have checked your site and there is an issue also with image on mobile, not only with title – http://screencast.com/t/GZgeKEznR2N
Like you can see you have to change the height of the image for mobile, you can test this custom css, also you may create you own I only make a suggestion: http://screencast.com/t/daVBdR6s0Mp
@media (max-width: 767px){
.page.single_template_6 #td-outer-wrap .td-header-wrap {
height: 400px !important;
}
#td-full-screen-header-image {
height: 500px;
}
.page .td-full-screen-header-image-wrap #td-full-screen-header-image .td-backstretch{
height: 500px !important
}
.td-post-template-6 .td-post-header {
bottom: 70px;
}
}
With this css you can target the title and meta .td-post-template-6 .td-post-header
Thanks!
