Why is the appearance/style of my DataPage different after deploying in WordPress?

[Latte]

When I choose to deploy my datapage to WordPress, the styling looks quite different and some elements and fields like radio buttons look distorted.

The appearance changed and it is not like the one from the preview while I was creating my app, it just looks odd. Why is that and is there a way around it?

[Odinson]

Hi Latte, 

Since WordPress themes have their own classes/styles it is possible that these classes will override your Caspio Datapage classes.
Also having website builder plugins like Elementor or similar can interfere and make your site appear differently. 

This is the solution that worked for me, and I hope it will work for you too.

First try to identify names of classes that your WP Theme is using by Viewing the source code by pressing CTRL+U if you are using windows.
Press CTRL+F to find styles applied by searching "stylesheet".

For example if you have applied basic WordPress theme "Twenty Twenty-One" you will find a stylesheet with the id:

<link rel="stylesheet" id="twenty-twenty-one-style-css" href="http://my-website.com/wp-content/themes/twentytwentyone/style.css?ver=1.1" media="all">

Focus on the 'id' attribute: 

 id="twenty-twenty-one-style-css"

Now you've found the name of the style applied.

The most elegant and standard way of adding and removing styles and other functionalities in WordPress is your functions.php file. 

If your goal is to remove the overwriting style from a specific page, you'll also need it's name. Let's say you want to remove the styles from landing-page
Example: www.mywebsite.com/landing-page

To do so in WP, follow these steps:

1. Log in to your WordPress dashboard
2. Navigate to "Appearance" tab and open Theme Editor
3. On the right side, under "Theme Files" choose "functions.php"
4. Scroll down to the bottom of the site, add the following WordPress function and press "Update File":

function remove_styles() {
    if (is_page( 'landing-page' )) {
        wp_dequeue_style( 'twenty-twenty-one-style' );
    }
}
add_action( 'wp_enqueue_scripts', 'remove_styles',99999 );

5. The function should remove the main Twenty Twenty-One Theme style. 

Note that you'll need to paste the name of the theme style without '-css' part and change this part of code if your page is a custom template

if (is_page_template( 'landing-page.php' ))

Hope this helps.