When you encounter conflicts between your custom CSS and the WordPress theme CSS, there are a few possible solutions to consider:
Use Specificity and CSS Selectors: Ensure that your custom CSS has sufficient specificity to override the conflicting WordPress theme CSS. You can use more specific selectors or apply inline styles to prioritize your styles over the theme's styles.
Use !important: Add the !important declaration to your custom CSS rules. This can forcefully override conflicting styles from the WordPress theme. However, it is generally recommended to use !important sparingly and only when necessary.
Disable Specific Theme Styles: If you have identified the specific CSS rules causing conflicts, you can disable them selectively. Inspect the elements on your site using browser developer tools and find the conflicting styles. Then, in your custom CSS, add rules to disable or modify those specific styles.
Create a Child Theme: If you plan to make significant changes to the theme's CSS, it's a good practice to create a child theme. This way, you can make modifications without altering the original theme files directly. You can then enqueue your custom CSS file to override the theme styles.
Modify Theme Files: If you have FTP access, you can directly edit the theme files to remove or modify the conflicting CSS rules. However, be cautious as modifying theme files can impact future updates and may require reapplying changes after updates.
Remember to take appropriate backups and exercise caution when making changes to your site's code. It's advisable to test changes in a development environment or staging site before implementing them on your live site.
Thanks
James Millere