CSS problems

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.

Hello Ivannus !
THanks fo the tip ! But where do you add this code ?

Thanks,

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

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.

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 ?

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?

You can try here :
https://www.byothe.fr/2016/06/concours-3-licences-premium-de-lexcellent-gestionnaire-de-taches-todoist-3-x-28-99e/

Thanks ??

I do not see the social media links so I cannot help you at the moment.

If you check https://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 https://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.

thanks Ivannus,

In order to see the social media link, you have to enter the contest…

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

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.

Thanks Ivannus, that works perfectly !

Glad to have been of help ??