I have 3 custom fields freeware, trial and apk each with its CSS, now I want only the custom fields which have values to show up and which don’t have values don’t show up completely (With their CSS).
https://softcroco.com/download-shareit-apk/
Screenshot of the issue:
In the URL above freeware and apk CFs have value and trial doesn’t has value and still it’s CSS appear and then disappear when I open or refresh the page!
I want to make custom fields which don’t have values don’t appear completely!
My Code:
<span class="freeware"><?php echo get_post_meta($post->ID, 'freeware', true); ?></span>
<span class="apk"><?php echo get_post_meta($post->ID, 'apk', true); ?></span>
<span class="trial"><?php echo get_post_meta($post->ID, 'trial', true); ?></span>
<script> const author = document.querySelector('.author'); const freeware = document.querySelector('.freeware'); const apk = document.querySelector('.apk'); const trial = document.querySelector('.trial'); if (author.textContent.trim() === '') {author.remove(); } if (freeware.textContent.trim() === '') { freeware.remove(); } if (apk.textContent.trim() === '') { apk.remove(); } if (trial.textContent.trim() === '') { trial.remove(); } </script>
.freeware { align-items: center; border: 1px solid rgba(38,153,251,.25); border-radius: 24px; color: #2699fb; display: inline-block; font-size: 12px; font-weight: 600; justify-content: center; padding: 0px 10px; border: 1px solid rgba(83,204,39,.25); color: #fff!important; background: #018660; margin-left: -5px;}.apk { align-items: center; border: 1px solid rgba(38,153,251,.25); border-radius: 24px; color: #ff003b; display: inline-block; font-size: 12px; font-weight: 600; justify-content: center; padding: 0px 10px; border: 1px solid #ff003b; color: #fff!important; background: #ff003b; margin-left: -5px; }.trial { align-items: center; border: 1px solid rgba(38,153,251,.25); border-radius: 24px; color: #ff003b; display: inline-block; font-size: 12px; font-weight: 600; justify-content: center; padding: 0px 10px; border: 1px solid #ff003b; color: #fff!important; background: #ff003b; margin-left: -5px; } .freeware, .apk, .trial { font-family: 'Roboto Slab'; font-size: 13px;} .infosoftware { display: flex; align-items: center; margin-top: -5px; }
A lot of CSS changes!