Hi,
This theme has some great templates, sans one where we can have medium like ‘one column’ posts with no side-bars and max-width of content 641px. I suggest devels should create a template so we can have a layout similar to this one:
http://boingboing.net/2015/04/16/arcology-cutaways-of-the-futu.html
Also is it possible to simply use Template 7/8 with no-sidebars chosen from settings. All I need to know is how to set content width to 641px and make it center aligned. I tried to play with margin-left and stuff but it breaks layout on iPads and other smaller screens.
Can someone suggest something?
Hi,
Unfortunately I cannot tell you exactly if a template like this will be added soon. You will need custom modification to achieve this. Thanks for suggestion we will think about this, however we have over 200 features on our list we have to pick very carefully what we implement.
You can try to use media queries and customize it for different screen sizes, For example this will be for desktop: http://screencast.com/t/YuvRLxQNxa
@media (min-width: 1024px){
.single_template_7 .td-post-content p {
width: 641px !important;
margin: 0 auto;
}
}
If this is not what you mean, please provide more details.
Thanks!
Thanks that’s real close to what I wanted. The only issue is that unlike the screenshot in my case the image is not aligned properly..
http://www.kalveda.com/2015/04/03/canyon-of-fire-seen-in-the-sun/
Hi,
Please try this custom css in Theme Panel > Custom Css: http://screencast.com/t/kAZOkx4d8
.media-credit-container {
left: 50%;
position: relative;
transform: translateX(-50%);
}
You use a fixed width on this div – http://screencast.com/t/2ByHtLSqy1vM so the image will not be responsive. You need to use media queries and a fixed width for mobile devices for example: http://screencast.com/t/5ZGBUj44k – http://screencast.com/t/ULRAGiLzLG
We think to add a custom template like that, but I cannot tell you a date for it.
Hope this helps!
@Alin: Excellent. We are almost there. One last issue remaining. The ads inserted in posts are now flowing wrong, as you can see in this post.
We are wrapping the ad in ‘ad1’ div. How can we fix that?
Hi,
You need custom css also for ad as you changed the post content width and the ad width is larger then content. You can try this custom css: http://screencast.com/t/On8ZyCKt737
.single_template_6 .ad1 {
transform: translateX(-30%) !important;
}
Thanks!
@Alin: Thanks. Pure awesome. However, it breaks ad in other templates:
http://www.kalveda.com/2015/04/02/comcast-to-compete-with-google-fiber-offer-2gbps-internet/
Please discard the previous comment. I was mistakenly using the same template 6 with side-bars enabled.
Thanks a LOT Alin for giving solutions so promptly. No surprise why I bought all three previous themes from TagDiv. Your support is par excellence.
Try to target only full width post(without sidebar):
.single_template_6 .td-pb-span12.td-main-content .ad1 {
transform: translateX(-30%) !important;
}
Thanks!
Thanks. That fixed everything that I needed. I think your devels can now offer a template similar to this one. I trust your customers will appreciate it 🙂
One minor issue. I was using a plugin Media Credit for image credits. When I disable the plugin (or don’t use credit for in-house image), the dig tag is not attached to those image and they are no more working since you gave me code for ‘media-credit-container’
.media-credit-container {
left: 50%;
position: relative;
transform: translateX(-50%);
}
What should I use instead of ‘media-credit-container’ if not using that plugin?
Example:
http://www.kalveda.com/2015/01/30/uas-unmanned-aerial-system/
Hi,
You will have to use div container for your images(that you want full) and use a class so you apply custom css to that class. Just take a look in the backend how this div is added – http://screencast.com/t/2ByHtLSqy1vM and add your own div when you don’t use the plugin – http://screencast.com/t/XLd6t89Z0q
Thanks!
Do I have to add a div container in the functions file? Because adding div class to image is not working. I added a div class “full-image’ to it and and added it to custom css. But the output is not full width image.
http://www.kalveda.com/2014/12/02/home-made-observatory-found-exoplanet/
Hi,
Please try this custom css: http://screencast.com/t/qJ04gNYOO
.td-post-content .full-image {
left: -50%;
position: relative;
transform: translateX(-60%);
}
.full-image img {
max-width: none !important;
}
Thanks!
Perfect. That worked. Thanks a tonn.
