Resize image in WP Audio Player

  • Resolved DeWilliam

    (@dewilliam)


    4 years, 5 months ago

    Hi, I’m struggling with CSS of WP Audio Player.
    Hereafter the changes I made (in Custom CSS):
    —————————————————————-
    /*WP AUDIO PLAYER */
    .wp-playlist-light {
    box-shadow: 3px 3px 0 #e2e2e2;
    }
    /* Captions – Track titles / subtitles, time */
    .wp-playlist-light .wp-playlist-caption,
    .wp-playlist-light .wp-playlist-item-length {
    color: #000000;
    }
    /* Captions – Current track */
    .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-title {
    font-size: 16px;
    }
    .wp-playlist-light .wp-playlist-item-album {
    font-style: normal;
    }
    .wp-playlist-light .wp-playlist-item-artist {
    text-transform: none;
    opacity: .8;
    }
    /* Playlist items */
    .wp-playlist-light .wp-playlist-item {
    padding: 10px 0;
    border-bottom-color: #000000;
    }
    .wp-playlist-light .wp-playlist-item:last-child {
    padding-bottom: 0;
    }
    .wp-playlist-light .wp-playlist-playing {
    font-weight: normal;
    border-bottom-color: #40d306;
    }
    .wp-playlist-light .wp-playlist-item-length {
    top: 10px;
    }
    —————————————————————-
    What I’m looking for is to improve the size of the little image in the left upper corner when you choose an item.
    Could somebody tell me what I can change to modify the size of the images (I found following values when launching the inspector: 60 × 60 pixels (intrinsic: 150 × 150 pixels).
    Thank you in advance for your time and answers.
    Kind regards,
    William from somewhere in France

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Intrinsic= Actual size of Image
    60= Size image is being constrained to because of this code:

    .wp-playlist .wp-playlist-current-item img {
    float: left;
    max-width: 60px;
    height: auto;
    margin-right: 10px;
    padding: 0;
    border: 0;
}

    Width is being constrained to 60px because of ‘max-width’ – remove it or change it.

    Also, the height is being constrined by:

    .wp-playlist-current-item {
    overflow: hidden;
    margin-bottom: 10px;
    height: 60px;
}

    Remove or change this as well

    e.g. 

    .wp-playlist .wp-playlist-current-item img {
    max-width: 150px;
}
.wp-playlist-current-item {
    height: 150px;
}
    • This reply was modified 4 years, 5 months ago by SJW.

    Hola @dewilliam Lo que te está limitando el tama?o en que se muestra la imágen es esto:

    .wp-playlist .wp-playlist-current-item img {
    float: left;
    => max-width: 60px;
    height: auto;
    margin-right: 10px;
    padding: 0;
    border: 0;
    }

    .wp-playlist-current-item {
    overflow: hidden;
    margin-bottom: 10px;
    => height: 60px;
    }

    Thread Starter DeWilliam

    (@dewilliam)

    Hola Tesa, muchas gracias! Funciona maravillosamente.
    Feliz dia de mayo.
    William de algún lugar de Francia

    Thank you
    Sorry for responding in Spanish. I am supportive in Spanish and I don’t know how I got here.
    If your query is resolved, please mark it.
    Happy day

    Thread Starter DeWilliam

    (@dewilliam)

    Thanks again, no problem Tesa!
    Happy day.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Resize image in WP Audio Player’ is closed to new replies.