The font size and color look different in editor and preview

Hi,
I want to display cards on a page, which are in a linkbox. But after i put the card in the link box, the settings of the font in the editor and in the browser dont match. I tried allready different browsers but it seems it is not because of this.


This is how it looks in the editor.

This is how it looks in the browser.
card-problem2
card-problem3
These are the settings for the 3 headings.

These are the settings for the link box.
Thank you in advance

Hi @KN02,

Looks like some CSS is not getting applied correctly.

Can you please send me the link to the preview page so that we can check and let you know the issue?

Thanks.

Hi @vishsahu,
of course.
https://tracki-blank-17232.preview.drapcode.io/geleande-details/geleande/d2c5aa43-c7c7-4e1d-bec3-550019a68ec9

This page looks secured.

Can you please send me the login details in the message or on email support@drapcode.com

This is weird, because it is all set to public.
I just send you the email.

Thanks @KN02

Please check now.

Linkbox components in side the Cards layer was creating issue for some reasons, so we have moved the Linkbox outside of it and it is working now.

Please check and let me know if you see any issues.

Thanks.

Hallo @vishsahu,
first it seemed to work but then another card appeart in the editor and so on the preview page.

So i deleted the extra card and the font of the headings again changed.

Hi @KN02,

2 cards appreared probably because we also opened the builder and you may have opened the same page at the same time.

For the issue, i saw that the cards layer was removed, so i have added it again and now the original design is back.

I am not 100% sure of the CSS hierarchy in this case, but adding a Cards layer just above the link box, is working.

Can you please check now?

Thanks.

Hi @vishsahu,
thank you for the help.
The cards layer has sub layers when i open the layer manager in the editor and also i see another card but not in the preview. So i think this should be enough.
I have the same problem on another page and i moved the cards item out of the link box but the issue is still there.
Can you explain how you did this so i can do it by my own?

Hi @KN02,

I am not 100% sure of the way to do it as these cards were built in Bootstrap 4 and now we have upgraded the UI to Bootstrap 5, so that could be the reason.

I just did a hit and trial method and it worked.

You can try pasting custom code for cards from here: Examples · Bootstrap v5.2

Like i have mentioned in this video:

Let me know if that works, if not then i will get these cards component upgraded and then it should work fine.

Thanks.

Hi @vishsahu ,
the problem is still there.
With the costum code component there is also another issue. When i want to display a reference field value it is not showing either.

I wanted to try to solve this with the costum component feature, because on other pages it works but i dont know how to create it. i was looking for it in the snippets but could not find it.

@KN02

How are you trying to use reference field with the custom code? As i know the custom code is just for static html code, so just trying to understand as how you are passing dynamic values there?

Thanks.

@vishsahu

When i use the custom code to get the card in the card are text components and i want to get the reference value in this text component

Ok. Looks like the issue is not with the custom code or the card, the issue is putting them inside the Linkbox.

If you try it without the Linkbox and put the links inside (buttons or something else), then i am sure it will work.

@vishsahu
yes this works.
But on other pages i have done this in the exact same way and it worked. So i thought that maybe i can save it where it works as a custom component an re-use it on the other pages.
Is this feature avaible allready because i cant find it?

Hi @KN02,

Since this is a dynamic component, so i don’t think reusing will work as it is. You can use Snippets/Segment for static components like Navbar, Footer, Sidebar etc but dynamic components have to be built again.

We have rececently released a feature called SubPage, where you can do this but that feature is in very early stage so it may have its own bottlenecks till we figure out and fix all the possible scenarions.

Thanks.

Here is the Subpage component, can you please check and see if this will work in your use case.

Thanks.

Hi @vishsahu ,

I tried to fixed it with the link button component but the problem is still there.
The settings are just like in the beginning only with a button instead of box.


Also i gave the button another color in the settings, which also is not showing. Instead it stays blue.

@vishsahu
I have tried the subpage component.
I used the data table of the page where it worked and only changed the binded data to get the right one on the site where it does not work.
then i dropped the subpage component and it still does not work. At the same time it works on the original site.
The same card with link box looks like this on the page where it works:

And it looks like this on the site where it does not work added with the subpage component where i copied the cards from the first image: