<a> tag taking up full width despite me setting it to 100px

Question

I have the code below to open a product label in a lightbox when it is clicked. When it is viewed on a mobile device it displays the same image but on click it opens the label in a new tab. (lightbox is responsive so the image is too small on mobile).

For some reason though when on mobile view, the tag takes up the entire width so that if you click to the right of it, it will open the image in a new tab. I don't understand why this is since I am setting it's width to 100px.

<style>
#lightbox {
    position: fixed;
    /* keeps the lightbox window in the current viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    /*use below to make a 1px black image with 75% opacity for the dark background instead of above. above has issues in IE*/
    /*background:url(overlay.png) repeat; */
    text-align: center;
    z-index: 99999;
}

#lightbox p {
    text-align: center;
    color: #fff;
    margin-right: 20px;
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 99999;
}

#lightbox img {
    box-shadow: 0 0 25px #111;
    -webkit-box-shadow: 0 0 25px #111;
    -moz-box-shadow: 0 0 25px #111;
    width:80%;
    max-width: 940px;
    max-height: 800px;
    z-index: 99999;
}

.mobile_label_view{
display:none;
}

@media only screen and (max-width: 950px) {

    .lightbox_trigger{
    display:none;

    }
    .mobile_label_view{
display:block;

}
}

.lightbox_trigger{
    margin-top:15px;
    cursor: pointer;
}
.mobile_label_view{
    margin-top:15px;
    cursor: pointer;
}
a.label_container{
    max-width:100px !important;
    width:100px !important;
}
</style>

<div id="wrapper">
    <!--have view label text-->
    <!--<a href="/image.png" class="lightbox_trigger">-->
 <!--               View Label-->
 <!--               </a>-->
 <!--               <a href="/image.png" target="_blank" class="mobile_label_view">-->
 <!--               View Label-->
 <!--               </a>-->
 <img src="/image.png" width="100px" class="lightbox_trigger">
 <a href="/image.png" target="_blank" class="label_container"><img src="/image.png" width="100px" class="mobile_label_view"></a>
</div>
<!-- #/wrapper -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function($) {

        $('.lightbox_trigger').click(function(e) {

            //prevent default action (hyperlink)
            e.preventDefault();

            //Get clicked link href
            //var image_href = $(this).attr("href");
            //Get clicked link src
            var image_href = $(this).attr("src");

            /*  
            If the lightbox window HTML already exists in document, 
            change the img src to to match the href of whatever link was clicked

            If the lightbox window HTML doesn't exists, create it and insert it.
            (This will only happen the first time around)
            */

            if ($('#lightbox').length > 0) { // #lightbox exists

                //place href as img src value
                $('#content').html('<img src="' + image_href + '" />');

                //show lightbox window - you could use .show('fast') for a transition
                $('#lightbox').show();
            }

            else { //#lightbox does not exist - create and insert (runs 1st time only)

                //create HTML markup for lightbox window
                var lightbox =
                    '<div id="lightbox">' +
                    '<p onclick=\'hideLightbox()\'>Click to close</p>' +
                    '<div id="content">' + //insert clicked link's href into img src
                    '<img src="' + image_href + '" />' +
                    '</div>' +
                    '</div>';

                //insert lightbox HTML into page
                $('body').append(lightbox);
            }

        });

        //Click anywhere on the page to get rid of lightbox window
        $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
            $('#lightbox').hide();
        });

    });

    function hideLightbox() {

        $('#lightbox').hide();
    }
</script>

Answer 1

You have:

@media only screen and (max-width: 950px) {

    .lightbox_trigger{
      display:none;
    }
    .mobile_label_view{
      display:block;
    }
}

Change .mobile_label_view from display:block to display:inline.

A block element, such as a div, takes up the full width available, whereas an inline element, such as a span, takes up only as much width as it needs.

Here's a jsfiddle linking to a cat pic as an example: http://jsfiddle.net/ethanryan/mg1vjeo2/