Title: Circle Icon Widget. Last modified: August 22, 2016 --- # Circle Icon Widget. * Resolved [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/) * I recently build a site with the Vantage theme. * In page builder there is a “circle icon widget”. I added a custom icon bij setting icon to “none” and set the Circle Background Image URL to a specific image. * This worked up until tonight. I changed the “read more” link. And suddenly I noticed that the icons are not showing anymore. The title and text is showing, just the icon isnt showing anymore. The weird thing is that on a mobile device… the icons are showing perfectly. * When I try to change the icon to a different standard icon…it shows but really small and I can’t change the size anymore. Again…on a mobile device the standard icon is showing perfectly. * What can I do to show my custom circle image again on a desktop computer? And what happend so that is doesn’t work anymore. Because the circle icons where showing just fine. Viewing 14 replies - 1 through 14 (of 14 total) * [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5642937) * Hello SKILL, * Hope you’re well! 🙂 * Can you share your website’s url? If possible, share a link with the icon in question. Looking forward for your reply. * Best Regards, Calvin * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5642966) * Hi, * website is [http://www.rustigekracht.nl](http://www.rustigekracht.nl) * icon link is [http://www.rustigekracht.nl/wp-content/uploads/2014/12/icon_circle-150×150.png](http://www.rustigekracht.nl/wp-content/uploads/2014/12/icon_circle-150×150.png) * Again, the circle icon worked just fine untill yesterday. And any default icons that come with pagebuilder do not work anymore either. Except on mobile devices. The icons show up just fine there. * Thanks in advance. * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5642970) * (edit) * To my recollation, the circle icons where showing fine untill I checked the following option in de Circle icon widget: * Link title and icon to “More URL” * After that de circle icons do not show anymore. Even when I unchecked the box. * Could that have anything to do with it? * [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643069) * Hey there SKILL, * Hope you’re well! 🙂 * As you said it works fine on mobile screen size but I can see that it is not somewhat incorporated to ‘read more’ button? The logo came first before the title of each post. am I missing something or I am just plain wrong? Let me know! 🙂 * Best Regards, Calvin * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643100) * Hi Calvin, * Not sure what you mean. At this point only “read more” (lees meer) is linked to a certain page. The title and the circle icon are not linked to another page. * Logo first, then title, then post then link…just as it does on mobile device. * But now….how to fix it on a not mobile device? * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643101) * Edit: * So I tried something: * 1. I made a backup of the website. 2. I selected another theme. 3. I removed the vantage theme. (theme i’m using) 4. I downloaded and installed the vantage theme again. 5. I Activated the vantage theme. !!! Circle Icons are visible again!!!! 6. I uploaded the “old” backupped style.css !!! Circle Icons are not visible anymore!!! * So the cause is in the style.css sheet. Where o where could tis be a problem in the .css file? * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643140) * Hi, * so I broke down the piece of code that made the circle icons disapear. I just don’t know why this code causes that. * For the image on the right bottom of the screen I wrote the following css code: * ``` #footerimg { float: right; margin: -300px -230px -150px 0; } ``` * This piece of code is not a problem. But I want the image not to be visible on a mobile device or a tablet. So I added this code: * ``` @media (max-width: 480px) { #footerimg { display: none; } ``` * As soon as I put in [@media](https://wordpress.org/support/users/media/) code here regardless of the display type the icons of the circle icon widget disapear. This also happens when I remove the `display: none;` property. * How can I fix this? * [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643157) * Hey there SKILL, * Hope you’re well! 🙂 * After looking at the code on your style.css I can see that you have a few of this * ``` @media (max-width: XXpx) { ``` * which is invalid. I suggest you add screen after the word ‘media’ like this: * ``` @media screen and (max-width: XXpx) { ``` * After you change those invalid lines of code. Let me know if that solve your issue. * Hope it helps! 🙂 * Take care, Calvin * P.S a tutorial for media query: [http://www.w3schools.com/cssref/css3_pr_mediaquery.asp](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp). You can also see there the different media types. * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643165) * Hi Calvin, * thanks for your help. Unfortunately the problem remains. * ( By the way: `@media (max-width: XXpx) {` is from the original style.css that came with the theme.) * Any other ideas? * [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643171) * Hey there SKILL, * Hope you’re well! 🙂 * > ( By the way: [@media](https://wordpress.org/support/users/media/) (max-width: > XXpx) { is from the original style.css that came with the theme.) * Yeah, it is valid and sorry about that. * As for the issue, I think it is working fine on my end ( I am on Desktop Screen) [http://prntscr.com/5rlgcm](http://prntscr.com/5rlgcm). * I suggest you clear your browser cache then visit the site again. * Best Regards, Calvin * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643184) * Hi Calvin, * Thanks again for your reply. * Standard I removed the code that makes te icons disapear. If you would look on a mobile device, you would see that the image is showing and not propperly placed in the screen of the mobile device. * If I would ad the code * ``` @media (max-width: 480px) { #footerimg { display: none; } ``` * the problem occurs again. * To quote U2: * > I still haven’t found what I’m looking for. * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643185) * I fixed it! * OMG I can’t believe why I didn’t see this syntax error before. I was missing a (how to you say) “curly bracket”. * Old code that didn’t work: * ``` @media (max-width: 480px) { #footerimg { display: none; } ``` * New code that does work: * ``` @media (max-width: 480px) { #footerimg { display: none; } } ``` * Notice the last curly bracket. * Thanks for all your help Calvin. Thanks to your reply’s I took al lot of different approaches to the problem that led to the sollution. * [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643201) * Hey there SKILL, * Glad you made it! 🙂 * I suggest you mark this thread as resolved so other members with the same issue can see that this ticket contains an answer that maybe a possible solution for their issue. * Take care, Calvin * Thread Starter [SKILL](https://wordpress.org/support/users/skill/) * (@skill) * [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643206) * Hi Calvin, * Good idea. I hope this topic can help others. * Best of luck. Viewing 14 replies - 1 through 14 (of 14 total) The topic ‘Circle Icon Widget.’ is closed to new replies. * 14 replies * 2 participants * Last reply from: [SKILL](https://wordpress.org/support/users/skill/) * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/theme-vantage-circle-icon-widget/#post-5643206) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics