Podcast App - layout and formating problems

I am having troubles with the formatting of the Podcast Player.
The website is built using Bootstrap 3. I have a 2 column layout and I can’t figure out the parameters. Fixed width (1000 px) ends up with the player being too wide and it is not responsive. Percentage is better (for instance, 75%) but I end up with a lot of empty space at the bottom.

* Link to the page with the widget in question:

1 Like

Hello @Stephen4! Welcome to Elfsight Community :heart:

I am so sorry that you’ve faced difficulties using our app!

I’ve forwarded your request to our devs and, hopefully, they’ll come up with a solution really soon.

Please do not worry, I’ll keep you updated :wink:

Hello @Stephen4!

Thank you for waiting!

To remove empty space, we’ve added this CSS code to the Custom CSS field on the Style tab:

[class^=“Playlist__Component”] {
height: auto;
}

[class^=“PlaylistItem__PlaylistItemComponent”]:last-child {
margin-bottom: 35px !important;
}

image

Please check it and let me know if you like what you see :slightly_smiling_face:

Hello Max,

It looks terrific now. I have one question about the styling for the player…

If you look at this page:

https://thercrmuseum.ca/en-ca/Podcasts-Xcillion

For short playlists (like Season 3), the whole list of episodes is visible without scrolling. But for longer playlists (like Season 1), the list of episodes scrolls. What is the factor that determines when the episode list starts to scroll? Is it a certain number of pixels in the vertical direction? A certain number of episodes? Knowing this would be helpful when I am doing page designs.

Thank you for fixing my problem.

Steve Karpik

1 Like

Hi @Stephen4!

Happy to hear that you are good now!

The determining factor for scroll appearing is the number of episodes.

If any other questions come up, feel free to contact us.

We’ll be happy to help :slightly_smiling_face:

Hello Max,

I decided to do some testing of the Podcast Player widget with some other DNN themes (skins). As I mentioned, it works well with a scheme that I wrote (Moose):

https://thercrmuseum.ca/en-ca/Podcasts-Moose

However, it runs into trouble with the standard skin that ships with the distribution of DNN (Xcillion):

https://thercrmuseum.ca/en-ca/Podcasts-Xcillion

The problem becomes evident if you narrow your browser window to from a very wide width to around 1150 pixels wide. I think the Xcillion is passing through a breakpoint at about this point.

The Xcillion skin is the one that most everyone will start with when developing a new DNN project. I’m active in the open-source community that develops DNN and I’d like to recommend DNN to my fellow developers because the Podcast Widget has been so useful for me. However, I don’t want to do so until, you’ve had a chance to look at what is going on with Xcillion.

Best regards,

Steve Karpik

1 Like

Hello @Stephen4!

I am so sorry about this inconvenience :pensive:

Do I understand you correctly that you mean this issue?

Hello Max,

Yes, you’ve identified it exactly right.

When the browser is very wide, the layout of the Podcast Player is perfect. As you narrow the browser window, you eventually hit a breakpoint where the container for the content goes to a smaller size. Other components on the page “understand” that the content container is now narrower (and that their columns are narrower). The Podcast Player does not.

You can arrive at the same problem if you open a new browser where initial width of the browser is less than 1150 pixels. All the other components on the page adjust to this width (and the narrower columns that they occupy). The Podcast Player does not. As a result some of the Podcast Player is extending outside the main container (as you’ve indicated with your arrow).

So I think we’re both talking about the same thing.

Steve

1 Like

@Stephen4 Thank you so much for such a detailed description of the issue!

We’ll investigate the issue with our devs! I’ll get back to you once I receive any updates!

Have a great day :slightly_smiling_face:

Hello @Stephen4!

Our devs checked your webpage and added the following code to the Custom CSS field on the Style tab of Season 3 widget:

.global-styles, [class*="Full__Author-sc"] {
    white-space: pre-wrap;
}

Please check it and let me know how it works for you :slightly_smiling_face:

That fixed it. Thank you.

Steve Karpik

1 Like

@Stephen4 Happy to hear that you are good now!

You are always very welcome :raised_hands: