How to make HTML elements to avoid adding extra blank space?

Luis,

Please send us screenshots, and your project, so we can investigate the issue.
Thank you!
...................................................
Sincerely,
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

It depends on what your HTML code looks like.
You can use inline CSS like this:

< div style>

or build classes to do the same like shown below:

.div.a{

text-align: center;
margin: 15px;
padding: 20px

}

then embed it in the HTML like so:

"html"
< style>
div.a{

text-align: center;
margin: 15px;
padding: 20px

}
< tyle>

<div class>
<>< span>text coloring you want< pan> <span style>Blue</span> < span> to show. < pan>
> </div>

Using a < div> element like shown will expand or contract to create a standalone section to do whatever you are going to with the HTML code the text goes in. Text also will have a margin of 15px and 20px of padding placing the text 35px from the left and right sides of the page with the same distance from other items on that appear before and after your code.

**Note: ** There are some spaces or quote characters used that should have the <> around it but without it the above codes would not be seen in this post. I used the quote features of the markup language so the could be visible except code that makes a portion of text blue like so:

< span>text coloring you want< pan> < span style>Blue < span> to show. < pan>

Thank you, NP Team and Doug G.

The code I´m trying to apply is to create "Flip Cards" and it creates them but with an extra blank space below in the same block so the next block looks a lot separated...

I´ll try some of what you explain above and see if I can make it work.

Have a good day. :)

Hi Luis,

Please let us know if you need our further help with this. In this case please provide your project with the inserted code.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello, Hella!

I did configured at least the first one, but when I replicate the code in the other grid containers and change it´s class name so I can have 3 different flipcards wich could be using/showing different colors an avatars, it stops working or acting wierd :P

Hope you can help me with this (project attached). I think this is like going for a candy for you jaja I will publish it in my website to share with everyone.

Here you can see four that I´ve already probed integrated into Nicepage and work well http://www.lgallp.ga/widgets-html/

Maybe you should be thinking about a Block Section call "HTML Widgets" so we can just click and apply this or that, here or there :P I mean, like pre-made or pre-integrated things that we can just tweak a little to work for us...

Most of the blocks are kind of only well organized or optimized containers but there is a lack of kind of "effects" or integrated things, like these flipcards or widget to call some social timelines... I don´t know. That´s what I´m trying to make easier for other users to create this kinf of things in their Nicepage websites. Mostly because I´m not a developer, just a Graphics Designer who likes to learn and play with things.

Thank you for your help and time.

Hello again.

This is a video showing you the extra blank space that it creates bellow the flipcards wich I can´t adjust or make desappear...
https://youtu.be/x7KzEvw9amg

Hi Luis,

Sorry for the delay.
About the blank space. You added a class to the Grid cell ("flip-card"). The "card" flips on hover on this element. So if the cell height is bigger than the card height you will receive such space where the hover works. I suggest that you remove it.

Usually, we do not provide support for custom code solutions as it has no relation to Nicepage. But this question is quite simple. You have 3 blocks where you need common styles and custom styles. You have "flip-card" classes for common styles. You need one more class like "card-1" for custom style. Using this class you can assign different colors for "flip-card-back" element.

Please let us know if you have any further questions.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Thank you for your time and help, Olivia.

I´ll try what you suggest. Have a nice day.

Luis,

You're welcome.
Please let us know if you need our further assistance.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

I am totally unable to successful see any HTML content work.
Its understood, where to insert header code and body code.
And that some content needs to reside in the collected folder in order to be seen.
Still, nothing is working.

Using Hype animations with collected assets and pure self-contained html coded 3D models.

Note, the process to add the same content in other applications - has the same process and work.
But not here using Personal Nicepage version. Could that be a limitation?

@ LGALLP

Thank you for the video... nice to see HTML content working to any degree inside Nicepage,
as to date, I am still unable to see any content that I have made, work at all.

I am new to Nicepage, yet the process should be similar to other programs - which do work - just not here.
Not sure what I am misunderstanding.

Seeing space issues, like yours, worries me. I am attempting to use backup solutions to Hype animations using video.
Yet video bloc in Nicepage places a sample URL but can not see how to place local content.

BTW - does anyone know if Nicepage whatever licence version can run offline? There are times I want to concentrate or use my laptop to do work - yet do not wish or may not have internet connectivity. When I try, a message pops-up requesting things are not able to sync etc. Hence the application doesn't actually let me use it. This would be a real sad thing if so.

HI, Fisher_warren2

About your first issue about working/linking to external files (videos in this case)... give me a chance to search for an answer that NP Team gave me about the same issue some time ago...

And for the other issue about Nicepage working offline, you should use the following link to download a version that works that way mostly, because offfline you would be able to connect to the predesigns server of any other types of content that only work online, but you´ll have at least all the blocks and other things that Personal License gives.

You should always download from this link instead of automatic updating into the app when it shows the new update message, or even instead of downloading from the normal Downloads page in Nicepage website, because thoes versions always try to connect to the online content and options. I don´t have the link for the Mac Full version, but it isn´t just changing the URL... I guess that would be another post of yours if you use Mac.

https://nicepage.com/download-windows-full

Hi again, Fisher_warren2

Here´s the link to the previous post I made about the same issue for external files:
https://nicepage.com/questions/46399/how-to-embed-self-hosted-video

Resuming: You have to create/insert the video block were you want when you´re creating your pages... then, upload the video(s) to your web hosting as if you already had published your website, for example with a "Videos" folder, and then copy the full URL of each video and replace the Youtube link for your video to show into that block/video frame.

Hope it can be useful for you. Have a nice day.

Hi Warren,

If you have any problem with custom HTML, please create a new provide topic with the issue description. We'll try to help you with this issue.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Thank you for your time and help, Olivia.

I´ll try what you suggest. Have a nice day.

Hola Luis, estoy intentando añadir 4 card flips mediante "html element" dentro de una tab pero me da muchos problemas.
¿Me podrías ayudar? ¡Quizás enviándome el código que te funcionó!
Gracias.

Hi Luis, I'm trying insert 4 card flips with html element inside a tab but it gives me many problems.
Can you help me? Maybe sending me the code that worked for you.
Thanks!

Hola, Iman... respecto a las flip cards, aunque logré hacer que funcionaran e hicieran el "flip", nunca logré quitar o hacer desaparecer un gran espacio en blanco que se crea por el tamaño mismo del efecto... Pero, encontré otro código que es únicamente CSS y permite crear un efecto 3D que podría servirte bien si te gusta como se vé. Lo que hace es aplicar una perspectiva al elemento y lo muestra en su posición normal al poner el ratón sobre el mismo.

Espero te pueda servir bien. Te comparto el enlace de mi publicación por las indicaciones rápidas (y adjunto el código):
https://nicepage.com/questions/112248/3d-hover-effect-css-applied-into-nicepage

Saludos, no dudes en escribirme si puedo serte de ayuda, con todo gusto.

Hola, Iman... respecto a las flip cards, aunque logré hacer que funcionaran e hicieran el "flip", nunca logré quitar o hacer desaparecer un gran espacio en blanco que se crea por el tamaño mismo del efecto... Pero, encontré otro código que es únicamente CSS y permite crear un efecto 3D que podría servirte bien si te gusta como se vé. Lo que hace es aplicar una perspectiva al elemento y lo muestra en su posición normal al poner el ratón sobre el mismo.

Espero te pueda servir bien. Te comparto el enlace de mi publicación por las indicaciones rápidas (y adjunto el código):
https://nicepage.com/questions/112248/3d-hover-effect-css-applied-into-nicepage

Saludos, no dudes en escribirme si puedo serte de ayuda, con todo gusto.

Hola Luis, lo reviso a ver si me sirve.
Muchas gracias por tu ayuda.

A la orden, Iman. Con todo gusto.

Ejemplo: https://drive.google.com/file/d/1h4XOO8o_uuuJr36o9pdtCrCjHcq47gcy/view

Last edited 10 December 2020 by LGALLP

Hi all,

I hv been struggling too with it but it is possible.
Suppose you have two adjacent words which need two different colors.
Lest say we have a company called solidit.

solid needs to be black and it needs to be orange.

You just go into the inline editor type in the two words, mark solid and select the black color from the palette.
Just do the same for it and choose orange

If you don't do nothing now you will see that extra blank space.

Just go back to the inline editor and position the cursor exacty between the two words. If you move the cursor to left and right you will notice that the color will change. Just press once <delete>.
Now the text will show the same but the extra blank is gone.

Online you can see the result at https://www.solidit.nl

Kind regards,
Erik

Last edited 05 April 2021 by e.beugelaar

Thank you for the tip, e.beugelaar! :)