Download button text next to download icon for mobile

tyrellnastor

Hello guys, I have the old css code for "Download" text next to the icon that works pretty good from previous lightbox version for mobile view. But after the V2 it doesn't work anymore. Please help me figure out how to re-enable the code. Here is the old css code:

/* Mobile first media query only applies our custom labels to desktops and tablets */

@media screen and (min-width: 737px) {
/*Allow lightbox icon buttons to expand to our custom content width*/
.sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
width: auto;
}
/*Give the icons some space between them and our custom text*/
.sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-icon,
.sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button .sm-fonticon {
margin-right: 6px;
}
/*Adding download image label to the download icon in lightbox view*/
.sm-user-ui .sm-button-image-download:after {
content: ' Download';
font-size: 16px;


}
/*Adding image size label to the size icon in lightbox view */
.sm-user-ui .sm-button-image-sizes:after {
content: '';
font-size: 16px;
}
/*Adding Image info label to the info icon in lightbox view*/
.sm-user-ui .sm-button-image-info:after {
content: '';
font-size: 16px;
}
/*Adding leave a comment labeel to the comment icon in lightbox view*/
.sm-user-ui .sm-button-image-comment:after {
content: 'Comment';
font-size: 16px;
}
/*Adding share photo label to the share icon in lightbox view*/
.sm-user-ui .sm-button-image-share:after {
content: ' Share';
font-size: 16px;
}
/*Adding tools label to the tools icon in lightbox view*/
.sm-user-ui .sm-button-image-tools:after {
content: ' Tools';
font-size: 16px;
}
}
/* Add background colour to download button on small devices */
@media only screen and (max-width: 1200px){

.sm-user-ui .sm-lightbox .sm-lightbox-panel .sm-lightbox-tools .sm-lightbox-icons .sm-button {
background-color: #B73A0F;}

/* Add the word "Download" after the download button */
@media only screen and (max-width: 1200px){

.sm-button.sm-button-image-download:after {
content: "Download" !important;
font-size: 95%;
margin-left: 8px;
color: #FFFFE7;
}

.sm-button.sm-button-image-download {
width: auto;
}

/* Label the share button in the lightbox */
@media only screen and (max-width: 1200px){

.sm-lightbox .sm-button.sm-button-image-share:after {
content: "Share" !important;
font-size: 95%;
margin-left: 8px;
color: #FFFFE7;
}
.sm-lightbox .sm-button.sm-button-image-share {
width: auto;
}

bobbyhero

If you can give us a link to your site, that will help us see what's going on, and if/how we can fix it :-)