I am having display issues with an audio player from securenet systems; it uses CSS to dynamically rearrange player elements depending on the page width. Depending on the window size, it sets a different class for the player and applies a layout. However, it all gets screwed up when the window resizes below ~1000px, because something in the theme (I assume?) applies the following CSS rule:
Is there a way to exclude a class from that rule? The audio player resizes properly, and the CSS above breaks it badly. The Audio player applies the .ssiencore class to that whole player div, so if we can exclude that class from having the above CSS applied, that would solve the problem.
All of which is already in the audio player's css file. That seemed to work, and the image sizing was applied correctly. However, now it seems to be not working again; the code on line 88: .row .col img:not([srcset]){width:auto;}
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I am having display issues with an audio player from securenet systems; it uses CSS to dynamically rearrange player elements depending on the page width. Depending on the window size, it sets a different class for the player and applies a layout. However, it all gets screwed up when the window resizes below ~1000px, because something in the theme (I assume?) applies the following CSS rule:
<style id='dynamic-css-inline-css' type='text/css'>
.row .col img:not([srcset]) {
width: auto;
and overrules the player's CSS rule.
Is there a way to exclude a class from that rule? The audio player resizes properly, and the CSS above breaks it badly. The Audio player applies the .ssiencore class to that whole player div, so if we can exclude that class from having the above CSS applied, that would solve the problem.
Thanks!
-Jesse
Hey Again,
Please turn off your caching and minification plugin as your page doesn't seem to be loading correctly:
Thanks
ThemeNectar Support Team
Done!
I see you got it working already. Have noted to review this in upcoming updates.
Best
ThemeNectar Support Team
I had duplicated most of the embedded CSS into the page's custom CSS; that worked for a day or two, but it's acting up again.
Hey Agian,
I am afraid I cant seem to follow you on this. Could you provide the CSS you added and remove the changes/ CSS edits you made ?.
Thanks
ThemeNectar Support Team
On Friday, I added the following CSS:
#b_WKSG .ssiencoreLarge .ssiEncore_songCover{
width:250px;
height:250px;
display:block;
float:left;
margin:0px;
padding:0px;
box-sizing: border-box;
}
#b_WKSG .ssiencoreMedium .ssiEncore_songCover{
width:250px;
height:250px;
display:block;
float:left;
margin:0px;
padding:0px;
box-sizing: border-box;
}
#b_WKSG .ssiencoreSmall .ssiEncore_songCover{
width:155px;
height:155px;
display:block;
float:left;
margin:0px;
padding:0px;
box-sizing: border-box;
}
#b_WKSG .ssiencoreXSmall .ssiEncore_songCover{
width:100%;
height:auto;
display:block;
float:left;
margin:0px;
padding:0px;
box-sizing: border-box;
}
All of which is already in the audio player's css file. That seemed to work, and the image sizing was applied correctly. However, now it seems to be not working again; the code on line 88:
.row .col img:not([srcset]){width:auto;}
is overwriting the CSS I added.
especially bad if the album art is large, and the explicit image size isn't set:
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.ssiEncore_songCover { max-width: 250px !important; max-height: 250px !important; }Thanks
ThemeNectar Support Team
Thanks!
Added this... which locks the image size at 250, but doesn't properly resize with the viewport. With a window width of 800px, it shows:
It should show:
(I got that by disabling that line in the DevTools window:
Then, the proper styling is applied:
Hi there,
Please add this css:
@media only screen and (min-width: 690px) and (max-width: 999px){ .ssiEncore_songCover {max-width: 156px !important;
max-height: 250px !important;
} }
Thanks.
OK...that works there, but window size 1000-1200 shows incorrectly still.
Is there a way to exclude the .ssiEncore_songCover class from this CSS?
Seems simpler than adding 120 lines of extra css.
Hey Again,
There are only two sizes being set by the player CSS therefore to override the "width:auto" you will have to add the same css with more priority.
Please remove all css provided earlier and use this only:
.ssiEncore_songCover { width: 250px !important; height: 250px !important; } .ssiencoreSmall .ssiEncore_songCover { width: 155px !important; height: 155px !important; }Thanks
ThemeNectar Support Team