Title: Thumbnail Margin on Post Level Last modified: August 22, 2016 --- # Thumbnail Margin on Post Level * Resolved [guyewhite](https://wordpress.org/support/users/guyewhite/) * (@guyewhite) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/) * LOVE your plugin. * For some reason, on the post/page/single level, the margin on the thumbnail is not cooperating. * For example, if you look at the bottom of * [http://www.guyewhite.com/3-reasons-common-core-shouldnt-scare/](http://www.guyewhite.com/3-reasons-common-core-shouldnt-scare/) * You’ll notice that there’s no space between the thumb and the excerpt. * My current Custom CSS settings for your plugin are… * ``` .tptn_thumb { float: left; margin: 5px; } .tptn_link { font-weight: 900; font-size: 16px; line-height: 20px; } ul { list-style-type: none; padding:0; margin: 0; } ``` * Thank you! * [https://wordpress.org/plugins/top-10/](https://wordpress.org/plugins/top-10/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297295) * Hi, * Thank you for the kind words. * Looking at the layout you have, have you considered using the inbuilt styles that I have with the plugin? Check “Custom styles” * Looking at the code, I noticed a `.entry-content img` margins are overriding the ones for .tptn_thumb * `img.tptn_thumb` might make a difference. Could you try this in your code. * Another alternative is to use: * ``` .tptn_thumb { float: left; margin: 5px !important; } ``` * Thread Starter [guyewhite](https://wordpress.org/support/users/guyewhite/) * (@guyewhite) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297299) * GREAT. We’re getting closer. * Why is one bullet ridding into another on the bottom of page: * [http://www.guyewhite.com/3-wishes-students/](http://www.guyewhite.com/3-wishes-students/) * You’ll notice that one of the photos is deciding to ride into the excerpt of another. How do I get one on each line? Each get’s it’s own space? * Thank you. * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297301) * Could you add this to the CSS file: * ``` .tptn_posts li { clear: both; } ``` * Thread Starter [guyewhite](https://wordpress.org/support/users/guyewhite/) * (@guyewhite) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297324) * FIXED. Last one now is the one on the sidebar. When we make the window smaller, the sidebar goes to the bottom of the page and we lose the bullets again. Why? * If you go to [http://www.guyewhite.com](http://www.guyewhite.com) and make the window smaller and browse to the bottom of the page, you’ll see what I mean. * This is it. After this, it’s resolved. Thank you Ajay! * You can also see a screenshot here: * [http://www.guyewhite.com/wp-content/uploads/2014/09/ScreenShot2.png](http://www.guyewhite.com/wp-content/uploads/2014/09/ScreenShot2.png) * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297332) * I’m not sure if this code will help, but can you try it? * ``` .tptn_posts li { clear: both; display: block; } ``` * or * ``` .tptn_posts li { clear: both; width: 100%; } ``` * Thread Starter [guyewhite](https://wordpress.org/support/users/guyewhite/) * (@guyewhite) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297343) * This is now resolved. * In the end, it appears that the theme I am using is overriding many of the CSS styles that I was attempting to implement. An easy fix was to use the CSS styles include in your plugin, but as I wanted to customize, I had to make some changes. * For me, the fix was to remove the use of “UL LI” altogether and simply utilize a table with rows as a way of creating a list of content. * I just sent you a donation via your plugin for your assistance. Thank you so much. The final CSS I utilized was… * ``` .tptn_thumb { float: left; margin: 5px !important; } .tptn_link { font-weight: 900 !important;; font-size: 16px !important; line-height: 20px !important; } .tptn_excerpt { font-size: 16px !important; line-height: 20px !important; } ``` * And the code for Custom HTML List was: * HTML to display before the list of posts: * `` * HTML to display before each list item: * `` * HTML to display after the list of posts: * `
` * HTML to display after each list item: * `
` * Thank you so much for your time. * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297352) * Thank you for the update, donation and the code! * It is indeed a different implementation with the use of tables. Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Thumbnail Margin on Post Level’ is closed to new replies. * ![](https://ps.w.org/top-10/assets/icon-256x256.png?rev=2986432) * [WebberZone Top 10 — Popular Posts](https://wordpress.org/plugins/top-10/) * [Frequently Asked Questions](https://wordpress.org/plugins/top-10/#faq) * [Support Threads](https://wordpress.org/support/plugin/top-10/) * [Active Topics](https://wordpress.org/support/plugin/top-10/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/top-10/unresolved/) * [Reviews](https://wordpress.org/support/plugin/top-10/reviews/) ## Tags * [margin](https://wordpress.org/support/topic-tag/margin/) * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/) * 7 replies * 2 participants * Last reply from: [Ajay](https://wordpress.org/support/users/ajay/) * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/thumbnail-margin-on-post-level/#post-5297352) * Status: resolved