``Incorporating a Bootstrap thumbnail and horizontal scrollbar across different browsers like Firefox and

I seem to be encountering a problem with the bootstrap thumbnail and horizontal scrollbar in Internet Explorer and Firefox, but strangely enough, not in Chrome or mobile browsers.

Specifically, when using Firefox and IE, the modals appear distorted with a horizontal scroll bar, whereas this issue is non-existent in Chrome or mobile browsers. As shown in the image below, this is the problem:

https://i.sstatic.net/qdJ8O.png

This is how the modals look in Firefox: https://i.sstatic.net/UHl9E.png and this is how they should display without any issues as seen in Chrome: https://i.sstatic.net/0uFYJ.png

Here is the modal code:

<div class="container" id="portfolio">
          <hr>
                <div class="row">
                     <div class="col-sm-6 col-md-4">
                         <div class="thumbnail">
                             <a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank">  <img src="images/text101.png" alt="..." class="image">
                                <div class="imgDescription">
                                     <h3 class="img-content"><strong>Text 101</strong></h3>
                                     <span class="modal-button" >
                                     <img src="images/unity1.png" style="height:30px; width:30px;" >    </span>                                         
                               </div>       
                              </a>

                     </div>
                 </div>

                 <div class="col-sm-6 col-md-4">
                         <div class="thumbnail">
                             <a href="landingPage.html"  target="_blank">  <img src="images/myweb-app.png" alt="..." class="image">
                                <div class="imgDescription">
                                     <h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
                                     <span class="modal-button" style="left:145px">
                                     <img src="images/webdev.png" style="height:30px; width:auto;" >    </span> 

                               </div>       
                                </a>
                         </div>
                 </div>

                    <div class="col-sm-6 col-md-4">
                     <div class="thumbnail">
                         <a href="#">  <img src="images/card3.jpg" alt="..." class="image">
                            <div class="imgDescription">
                                 <h3 class="img-content"></h3>
                                 <span class="modal-button"></span>


                           </div>       
                            </a> 
                     </div>
             </div> 

        </div>  <!-- portfolio end here -->

Additionally, here is the CSS being used:

.thumbnail {
                position: relative;
                display: inline-block;

            }
            .thumbnail .imgDescription {
                position: absolute;
                top: 4px;
                left: 4px;
                width: 98%;
                height: 96%;
                display: none;
                color: #FFF;
                 -webkit-transition: opacity .25s ease;
                -moz-transition: opacity .25s ease;

            }
            .thumbnail:hover .imgDescription {
                display: block;
                background: rgba(0, 0, 0, .6);
            }

            .thumbnail .imgDescription .img-content {
                position: absolute;
                top: 25%;
                left:35%;
                color:white;    
                }

        .thumbnail .imgDescription .modal-button {
            position: absolute;
                top: 55%;
                left:43%;
        }

Despite my efforts, I've been unable to pinpoint where the issue lies. It's perplexing that everything works fine in Chrome and mobile browsers, so any assistance would be greatly appreciated.

Answer №1

Your tags need to be properly nested in HTML. Make sure to close each tag in the order they were opened before moving on to the next one. Here is an updated version of the portfolio HTML code:

<div class="container" id="portfolio">
    <hr>
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"><img src="images/text101.png" class="image" width="100%">
                    <div class="imgDescription">
                        <h3 class="img-content"><strong>Text 101</strong></h3>
                         <span class="modal-button">
                             <img src="images/unity1.png" style="height:30px; width:30px;">
                        </span>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="landingPage.html" target="_blank"><img src="images/myweb-app.png" alt="..." class="image" width="100%">
                    <div class="imgDescription">
                        <h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
                        <span class="modal-button" style="left:145px">
                            <img src="images/webdev.png" style="height:30px; width:auto;">
                        </span>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="#"><img src="images/card3.jpg" alt="..." class="image" width="100%">
                    <div class="imgDescription">
                        <h3 class="img-content"></h3>
                        <span class="modal-button"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

Additionally, width="100%" has been added to the images for compatibility with Internet Explorer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to modify the color of a corner in an HTML box?

<iframe width="100%" height="500" src="https://minnit.chat/Real97ChatRoom?embed&amp;web" style="border: none;" allowtransparency="true"></iframe><br /><a href="https://minnit.chat/Real97ChatRoom" target="_blank" rel="noopener noref ...

Locked element within a restricted container

I've been searching for a solution to this issue for hours, but it seems that others' problems were simpler than mine. Is there a way to keep a position:fixed element inside a fixed-sized div without it overflowing? In simpler terms, I want scr ...

Displaying the template of a subclass component in Angular 4

Is there a way to display a list of items (components) based on their types in Angular? I currently have an array of components that all inherit from a base class. The array type is defined as the base class, but I would like each item in the array to be ...

A fleeting moment reveals a broken image tag

How can I prevent the broken image tag from briefly appearing when the page loads? Take a look at this example: http://jsfiddle.net/v8DLe/196/ I have already implemented: onerror="this.style.display ='none'" Is there a way to still use the img ...

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

Adding a class to an element can be easily achieved when both input fields have values

Is it possible to apply the "active" class to the element go_back_right only when both inputs with classes search_box_name and search_box_id have content in them? I've tried looking for solutions on this platform, but being new to JavaScript, I couldn ...

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

"Navigate back with just a click - XSL button

My expertise in this area is limited. After some searching, I couldn't find exactly what I need. Hopefully, the solution is simple. I am currently developing a software control system with a built-in web server. Certain points during navigation requi ...

Obtain and retrieve media URL (m3u8) with the help of PHP

I am currently working on a project that involves hosting videos for a client on a website. The videos are loaded externally through m3u8 links on the site. Now, the client has expressed interest in having these videos available on a Roku channel as well. ...

Is it possible to adjust a CSS value once a JS value hits a specific threshold?

Currently, I am developing a web game where the website displays different emotions, including anger. I have successfully implemented the anger level internal coding and I am now focusing on adding a color-changing feature when the anger level reaches a sp ...

Enhance parent style when child's data-state or aria-checked attributes are updated in React using Styled Components

Within a label, there is a button embedded as shown below: <MyLabel htmlFor='xx' onClick={() => onChange}> <MyButton id='xx' {...rest} /> Check it! </MyLabel> In the Developer Tools Elements section, the st ...

Is it possible to ensure that a newly created element functions in the same way as an existing element?

I am currently in the process of developing an application that empowers users to generate new items, modify existing items, or delete items by utilizing corresponding icons located adjacent to each item. When it comes to existing items, the action icon d ...

The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet: localStorage.setItem('colorvar', '#EBDBC2'); I&ap ...

Error: unexpected syntax error at the end of the for loop in PHP MySQL

I encountered a puzzling issue with the "endif" statement after properly implementing code I found on YouTube with MySQL. <?php <?php for($x = 1; $x <= $pages; $x++); ?> <a href="?pages=<?php echo $x; ?>&per-page=< ...

Two hyperlinks are not visible

I've added 2 links in my header component, but for some reason, they are not displaying. It's strange because everything appears to be correct. These 2 links are part of a list within a ul element. <nav class="navbar navbar-expand-lg navbar-d ...

Assistance required with extracting information from JSON format on a website

Seeking assistance in displaying the last 10 songs played on a web page using JSON data. The current code is not fetching and showing the requested information from the json file. https://jsfiddle.net/Heropiggy95/6qkv7z3b/ Any help in identifying errors ...

Using PHP to extract an image in HTML

I have a server-side PHP file that retrieves a jpeg image from the server using echo file_get_contents(). My goal is to fetch this image through Ajax and display it in an HTML file on the client side. Although I am successfully able to receive the image ...

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempti ...

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

Utilizing a mouse-over script for image popup alignment

I recently came across the mouse over script below on a website, and I must say it works really well and is very easy to use. The only issue I have with it is the placement of the image. Currently, the image follows the cursor as it moves. Question: Is th ...