Circle Icon Widget.

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

Hi,

website is https://www.rustigekracht.nl

icon link is https://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.

(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?

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

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?

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?

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 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?

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: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp. You can also see there the different media types.

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?

Hey there SKILL,

Hope you’re well! ??

( By the way: @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 ) https://prntscr.com/5rlgcm.

I suggest you clear your browser cache then visit the site again.

Best Regards,
Calvin

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.

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.

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

Hi Calvin,

Good idea. I hope this topic can help others.

Best of luck.