Title: CSS problems Last modified: August 30, 2016 --- # CSS problems * [byothe](https://wordpress.org/support/users/byothe/) * (@byothe) * [10 years, 4 months ago](https://wordpress.org/support/topic/css-problems-26/) * Hello * I really love this plugin (despite the fact that it’s not translated) but I came accross a problem with the way it looks. * The title of the box doesn’t appear (it seems to be below the cup icon instead of next to it) * The icons of social medias are not aligned on on line… there is one per line like this * Facebook * Twitter * instead of this * Facebook Twitter * [https://wordpress.org/plugins/contestfriend/](https://wordpress.org/plugins/contestfriend/) Viewing 13 replies - 1 through 13 (of 13 total) * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823875) * Hi byothe. I just installed the plugin and had the same problem with the title. Turns out that the image was taking up all the line so the title got pushed down. * Just in case you’re still using the plugin and need to fix this, all you need to do is add a line of css to fix the image display: * ``` div.cf_title img { display: inline-block !important; } ``` * Alternatively, you can always remove the image from showing if you don’t like it. In this case edit the above as follows: * ``` div.cf_title img { display: none !important; } ``` * This automatically removes the space used by the image, thus sending the title properly in line with the box. * The Facebook and Twitter links might also be the result of display:block css coding, but since I haven’t used them can’t tell you for sure. * Thread Starter [byothe](https://wordpress.org/support/users/byothe/) * (@byothe) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823876) * Hello Ivannus ! THanks fo the tip ! But where do you add this code ? * Thanks, * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823878) * Your theme might have a specific place where to put custom CSS code. * If not, I suggest using a Child Theme. The one I use provides space to input your own CSS code. * Let me know if you need any more help. * Regards * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823879) * I use a couple of premium themes mostly. The place where I can input my own CSS is under the ‘Appearance’ tab. My themes have a specific tab here with Theme options and a sub tab with CSS. * Thread Starter [byothe](https://wordpress.org/support/users/byothe/) * (@byothe) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823880) * Wow ! That works great ! Thanks for the tip ! * And do you have the problem with the social icons (for sharing the contest) that are not on the same line but each on a different line ? * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823881) * I tested mine and they came in line, though they had a white background that I removed. * Could you send me the url and I’ll take a look at it? * Thread Starter [byothe](https://wordpress.org/support/users/byothe/) * (@byothe) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823882) * You can try here : [http://www.byothe.fr/2016/06/concours-3-licences-premium-de-lexcellent-gestionnaire-de-taches-todoist-3-x-28-99e/](http://www.byothe.fr/2016/06/concours-3-licences-premium-de-lexcellent-gestionnaire-de-taches-todoist-3-x-28-99e/) * Thanks 😉 * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823883) * I do not see the social media links so I cannot help you at the moment. * If you check [http://www.planet-w.ru/contestfriend-test/](http://www.planet-w.ru/contestfriend-test/) I have set up a test to show you. The social media icons still have a white background at the moment, but since I’m not using them I didn’t bother to edit the CSS. ( If you’ll need let me know). * This website is for a Russian client of mine, so not even I can understand the text. We have set up multiple contests so that people can vote for their preferred contestant in Mrs. Russia. This page is at [http://www.planet-w.ru/%D0%BC%D0%B8%D1%81%D1%81%D0%B8%D1%81-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D1%80%D0%BE%D1%81%D1%81%D0%B8%D0%B8-2016/](http://www.planet-w.ru/%D0%BC%D0%B8%D1%81%D1%81%D0%B8%D1%81-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D1%80%D0%BE%D1%81%D1%81%D0%B8%D0%B8-2016/) * I have customised the CSS to show only some things and not others, change colours, etc. * If you wish to create a test page with a test contest like I did and send me the link, I will be glad to help you out. * Thread Starter [byothe](https://wordpress.org/support/users/byothe/) * (@byothe) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823884) * thanks Ivannus, * In order to see the social media link, you have to enter the contest… * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823885) * I see * Try the following: * ``` /* Place social media icons in line with each other in ContestFriend widget */ div.cf_actions_inner div.social a { display: inline-block !important; } /* Add some padding (space) between social media icons in ContestFriend widget */ div.cf_actions_inner div.social a img { padding: 5px; } ``` * The text placed in /* */ are comments – for you to know what it’s about if you look at the CSS some time for now. Helps you remember why you did it 🙂 * In the first case I wrote !important since this line supercedes the default coding. There is no padding css around the image by default, so no need to write !important. * I would appreciate your letting me know whether this solves things. You’ve got my email address in the contest now anyway 🙂 * Ivan * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823886) * Padding can be changed to the amount you prefer. * Padding: 5px on its own will increase padding all around by 5px. You can be more specific and divide each section as follows for example: * ``` padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; ``` * There is a shorter way to write the above but I don’t want to complicate things for you. * Thread Starter [byothe](https://wordpress.org/support/users/byothe/) * (@byothe) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823887) * Thanks Ivannus, that works perfectly ! * [Ivannus](https://wordpress.org/support/users/ivannus/) * (@ivannus) * [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823888) * Glad to have been of help 🙂 Viewing 13 replies - 1 through 13 (of 13 total) The topic ‘CSS problems’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/contestfriend_e6af5e.svg) * [ContestFriend for WordPress](https://wordpress.org/plugins/contestfriend/) * [Frequently Asked Questions](https://wordpress.org/plugins/contestfriend/#faq) * [Support Threads](https://wordpress.org/support/plugin/contestfriend/) * [Active Topics](https://wordpress.org/support/plugin/contestfriend/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/contestfriend/unresolved/) * [Reviews](https://wordpress.org/support/plugin/contestfriend/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * 13 replies * 2 participants * Last reply from: [Ivannus](https://wordpress.org/support/users/ivannus/) * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/css-problems-26/#post-6823888) * Status: not resolved