Doesnt copy components
Hi,
Just bought the extension and tried it on a couple of webpages, and more often than not it utterly fails.
examples - am trying to copy both the header and the footer in tailwindcss:
https://www.mogl.online/blog
https://www.rra.gov.rw/en/home
Tried different settings to no avail. Just fails entirely.
Comments6
brian
Oct 7, 2024
I’ve checked all the examples you have provided.
Here are tips to fix most of these issues:
1) When you copy full page, you should scroll down inside the page before Copying to make sure all elements are loaded
2) If the website has JS functionality (such as the navbar mobile/desktop responsive menus), DivMagic can’t copy them. We are not able to see JS code so please do this copy in two steps. First copy the mobile version and then the desktop version and merge them inside your code. If there’s no JS involved DivMagic does this for you but when there is JS code you’ll need to do this manually since we can’t access it.
3) If the page shows empty in Studio, that is 99% due to absolute elements. In the MOGL example, simply removing the “bottom-[XXX]” class from the top div fixes the display. This happens because DivMagic tries to copy elements as you see them on your screen. When websites use absolute positioning, elements are rendered with respect to each other and not the screen so they show up differently in Studio.
4) IMPORTANT: Even though we provide Full Page Copy feature, it is always better to copy smaller elements and add them to your code one by one. Copying smaller elements is safer and more efficient because you only need to deal with one element at a time and DivMagic can process it better because we would be analyzing a smaller CSS.
brian
Sep 25, 2024
I’ve tried both places you mentioned and it worked:
1) https://divmagic.com/studio/c/4jczBhawTt
2) https://divmagic.com/studio/c/6cm0mF8MSS
We can’t copy JS code so the navbar changing to menu icon on mobile won’t be shown. Similarly, the icons on the rra website come from a custom font so to see those you need to include the same custom font in your code.
I wanted to make sure you’re using the latest version of the extension and the “Adaptable” copy mode?