Thought I would post a follow up here…the audio players have CSS code that on small devices, it adds a margin:
@media (max-width: 768px) {
.fl-node-59a5d99c61d3e > .fl-module-content {
margin-bottom: 20px;
}
}
You can try copying that code above and paste it into the Additional CSS tab of the customizer in your admin and changing the margin-bottom to 0;
@media (max-width: 768px) {
.fl-node-59a5d99c61d3e > .fl-module-content {
margin-bottom: 0;
}
}
You can also apply a height to that as well…right after the margin-bottom: 0; line with:
height: 50px; (or whatever height you want. Actually, it might be better to do it as:
min-height: 50px;
It doesn’t seem to be working. Weird thing is i have another site, where i didn’t need to do all this and it works fine….do you think it could be a beaver builder glitch? thing is…if it is, the only way it seems i can talk to them is pay 99 dollars to get a package which includes support?
Hmmmm odd it doesn’t work. I tried it in my Chrome webmaster tools and applied the changes and it worked for me and saw the spacing collapse with the new style. I’m wondering if it’s a cache issue…clear your browser cache and if you are using a cache based plugin, clear that too. Also, if you are on a CDN like Cloudfare or something different, then you will need to switch to dev mode or whatever setting it has to disable any form of caching.
UPDATE: Ah, I looked at your code again. Try this:
.wp-audio-shortcode, .wp-video, .wp-playlist.wp-audio-playlist {
margin-top: 0;
margin-bottom: 0;
}
Cleared the cache in chrome, but it still doesn’t seem to be working:/
Again, i am using beaver builder lite to set up the page
Try the last code I pasted but instead, add a !Important right after the 0 on each.
hmmm…odd. Something is definitely causing a conflict somewhere. I looked at the CSS again in the webmaster tools but it looks like the twenty sixteen theme’s own stylesheet is overriding it and still loading an active:
.wp-audio-shortcode,
.wp-video,
.wp-playlist.wp-audio-playlist {
margin-top: 0;
margin-bottom: 1.75em;
}
…despite the fact your custom css is loading after the theme’s own stylesheet. I also see Beaver Builder’s own stylesheet is loading this:
@media (max-width: 768px) (
.fl-node-59a5d99c61d3e > .fl-module-content {
margin-bottom: 20px;
}
}
….from a 2-layout.css stylesheet. Each .fl-mode- has it’s own unique player identifier, hence the -59a5d99c61d3e in the code above.
Not sure what to suggest at this point without actually having the theme code in front of me. I find it odd though that the twentysixteen styles are still overriding the custom css. I remember making my Transference child theme as well as my own Child Theme Styles website from twentysixteen, that overriding the 2016 CSS was a nightmare.
