Okay
  Public Ticket #3217177
CSS issues with dynamic resizing
Closed

Comments

  • Jdiller-STCM started the conversation

    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

  •   Jdiller-STCM replied privately
  •   Jdiller-STCM replied privately
  •  8,342
    Tahir replied

    Hey Again,

    Please turn off your caching and minification plugin as your page doesn't seem to be loading correctly:  

    7504318878.pngClick on Image to View Larger

    Thanks 


    ThemeNectar Support Team 

  • Jdiller-STCM replied

    Done!

  •  8,342
    Tahir replied

    I see you got it working already. Have noted to review this in upcoming updates.

    Best 


    ThemeNectar Support Team 

  • Jdiller-STCM replied

    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.

  •  8,342
    Tahir replied

    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 

  • Jdiller-STCM replied

    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.

    5906068549.png


  • Jdiller-STCM replied

    especially bad if the album art is large, and the explicit image size isn't set: 

    8417881058.png

  •  8,342
    Tahir replied

    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 

  • Jdiller-STCM replied

    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:

    7723259231.png

    It should show:

    2418011733.png

    (I got that by disabling that line in the DevTools window:

    1949081257.png

    Then, the proper styling is applied:

    8977492700.png


  •  1,591
    Judith replied

    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.

  • Jdiller-STCM replied

    OK...that works there, but window size 1000-1200 shows incorrectly still.

    7709069955.png


    Is there a way to exclude the .ssiEncore_songCover class from this CSS?

    5491748020.png

    Seems simpler than adding 120 lines of extra css.




  •  8,342
    Tahir replied

    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