HI,
I’m using Default Post Template Style 1 on my site.
I would like to show the AD Block (Post template style 1) on the right side of the page in stead of the left side (where it shows up by default). And I would like the featured image to show up on the right side of the page (where the ad currently shows up). How can I do that? which files do I need to modify?
Also, I wanna make sure that both the ad block and the featured image fits right next to each other. The ad size I’m currently using is 300×250. What should be the max size of the featured image so that both fit next to each other?
I tried showing up the featured image and the regular image in the image and in both cases I can’t make the ad block to show up in the right side.
Any help with this regards would be greatly appreciated.
Many thanks in advance.
Hello dmalhotra,
If you want to have the featured image aligned to the right and not to the left, you should use a bit of CSS code to do this. Try the code below and place it in Theme Panel ->Custom CSS Area.
The code is ->
.td-post-template-1 .td-featured-image-rec {
float: right;
margin-left: 21px;
}
The result is here -> https://www.screencast.com/t/D7Ken1D5
For more information about the each thumb size, please check the Theme panel, like here -> https://www.screencast.com/t/YGjAjFBj
Hope this helps!
Thanks for your understanding!
Hello Catalin,
Thank you so much for your reply. However, the result is not what I desired. And it is not your fault. I just re-read my original post and I did not state clearly what I was looking for.
I need the featured image to be on the left side of the page and I need the ad block (ad block post template style 1) to be on the right side of the page. They both need to be right next to each other. With featured image and ad block in the same row… I would like the rest of the post (text, images etc) to show up right below them. Please note that the featured image size on my site is 300px wide and the ad size is 300px wide as well. How can I get the featured image and ad block to show up right next to each other without the ad block to scroll down?
I hope that you can help.
Thank you so much!
Hello dmalhotra,
If you want to make these changes you should try the code below and place it in Theme Panel->Custom CSS area.
The code is ->
.td-post-template-1 .td-featured-image-rec {
float: none;
width: auto;
}
.td-post-template-1 .td-post-featured-image{
float:left;
}
.td-post-template-1 .td-post-content p:first-child{
clear:both;
}
The result is here -> https://www.screencast.com/t/DP88RyzZPG7u
Thanks for your understanding!
Hello Catalin,
AWESOME! This is exactly what I wanted. Thank you!
I tried the code on my blog and on desktop it seems to work just fine … but when I checked the site on ipad mini (with 768×1024 view port) … and samsung galaxy tab 10 (with an 800×1024 view port) the ad (300x250px) scrolls down below the featured image (300×250 px). I was hoping that the featured image / ad block would be responsive.
Would it be possible for you to modify/add the code so that the layout remains responsive on other devices? I would REALLY appreciate it.
THANK YOU SO MUCH FOR ALL YOUR HELP!!
On iphone resoultion
Hello dmalhotra,
Please notice that the code which I have provided you above is a general code which may need further adjustments for a better look on the others devices. Notice that you should do it yourself if you want this because we cannot provide custom services at the moment, sorry! I gave you just one step of your project that you need to keep going on to achieve best results.
You can try using the code below if you want that effect to be available only for desktop devices.
@media (min-width:1024px){
.td-post-template-1 .td-featured-image-rec {
float: none;
width: auto;
}
.td-post-template-1 .td-post-featured-image{
float:left;
}
.td-post-template-1 .td-post-content p:first-child{
clear:both;
}
}
Thanks for your understanding!
Hello Catalin,
I totally understand that you can not provide custom service. You’ve already been very helpful and I am grateful to you for helping me get started in the right direction.
Thanks a lot!
Hello dmalhotra,
I am glad that I could help you.
Thanks.
