The image grows in size until it requires scrolling to view the entire thing

<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<section class="container-fluid px-0">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
      </div>
    </div>
    <div class="col-lg-6">
      <img class="img-fluid" src="https://via.placeholder.com/4000x500.svg" alt="">
    </div>

  </div>
</section>

I have provided a video that demonstrates the issue I am encountering at this location

htmlcssbootstrap-4responsive-design

Answer №1

It is advisable to utilize col-6 in place of col-lg-6 for optimal functionality.

<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<section class="container-fluid px-0">
  <div class="row align-items-center">
    <div class="col-6">
      <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
        <h1 class="text-center">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
      </div>
    </div>
    <div class="col-6">
      <img class="img-fluid" src="https://via.placeholder.com/4000x500.svg" alt="">
    </div>

  </div>
</section>

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

Which component from the Bootstrap library would be best suited for my needs?

I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...

htmlcsstwitter-bootstrap

Is there a method to prompt CSS and the web browser to utilize the system's designated font if available, or default to font-face otherwise?

Is there a way to instruct the browser to download a font only if it is not already built into the OS of the system? Right now, I am using @font-face to define the font, but this results in the font being automatically downloaded by the browser. I would l ...

htmlcssfontswebfonts

dynamic dropdown displaying colors for selection

Using a bootstrap form to add a printer involves selecting the material and color. The dynamic dropdowns are functioning correctly, but it is necessary to display the selected color for user clarity. Please guide me on how to pass the color along with its ...

javascripthtmlcss

What is the method to process a JSON path containing a special character like "@"?

I'm attempting to retrieve JSON data from an API with the following structure. My current approach involves using JavaScript. The code snippet I have utilized is displayed below. <p>"stations": [</p> <p id="data"></p> ...

javascriptjqueryhtmljson

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

I have encountered a situation where I need to insert closing tags before an HTML element and then reopen it with the proper tags. The code snippet I am using is as follows: tag.before("</div></div>"); and then re-open it by adding proper tag ...

javascriptjqueryhtml

Increasing the boundary width beyond a specified limit with CSS

Need help extending the border-top of an element beyond a container width set to 1024px, while maintaining center alignment on the page with left alignment. Thank you! Here is the code snippet: HTML <main> <div> <span>Hello& ...

htmlcss

Navigate through previous and next siblings in jQuery until a difference is found

Here's the issue: I have a div with multiple siblings positioned before and after it. For example: <div id="parent"> <div class="invalid"></div><!-- break iteration here !--> <div class="operand"></div> <div cl ...

jqueryhtmlcss

JavaScript: Find options in a datalist that correspond to user input

One of the features I am working with is a text input that utilizes a datalist. The content of this datalist is populated dynamically using PHP: <input type="text" name="city" list="cities" id="city"> <datalist id="cities"> <?php ...

javascriptphphtmlinputdatalist

custom dialog box appears using ajax after successful action

Recently, I created a custom dialog/modal box with the following code: <div id="customdialog" class="modal"> <div class="modal__overlay"></div> <div class="modal__content"> <h2><strong>Hello</strong&g ...

javascriptjqueryhtmlajax

There appears to be an issue with the functionality of the Bootstrap toggle tab

Currently, I am facing a toggle issue and having trouble pinpointing the root cause as there are no errors appearing in the console. The problem involves two tabs that can be toggled between - "pay" and "method". Initially, the default tab displayed is "pa ...

javascriptjqueryhtmltwitter-bootstraptoggle

The mix-blend-mode feature is not compatible with Chrome browser

I'm having an issue with the mix-blend-mode property in Chrome, as it's not functioning correctly. However, it works perfectly fine on Firefox and Safari. My goal is to achieve a cutout text effect. Thank you for any assistance! h1 { mix-blend ...

cssmix-blend-mode

My website is being cut off

After creating this website with a viewport setup, I noticed that it is not fully visible on certain screens. When viewed on a CRT monitor at 800x600 desktop resolution or lower than 1280x800, such as on mobile devices, the content gets clipped. Is there a ...

csswrapperviewport

Is there a way to streamline the process of uploading an image and storing its details in a single HTML form with just one submit button?

Here is the code snippet I have: <form id="registration_form" action="AddProductServlet" method="post"> <div> <label> <input placeholder="Product ID" name="pid" type="text"> ...

javahtmlformsjspservlets

Passing a variable from a jQuery function to a submitted form: the ultimate guide

I stumbled upon this code snippet online and it's exactly what I needed to learn from as a beginner using jQuery. However, I have a question about transferring or passing the value of counter that was used in the jQuery script within the HTML head tag ...

jqueryhtmltextbox

Displaying an email exist error message is important when updating an email address, and it is necessary to validate both the

      My code is triggering an email exists error when I remove NOT EXISTS from the SELECT query. However, it also incorrectly claims that my current email already exists when I try to update it. How can I modify the select query to handle the email e ...

phpjqueryhtmlajax

Tips for horizontally centering div elements with container and row class in Bootstrap 5

I am having trouble aligning the section properly in the center, and the div does not have a container class. Is there a bootstrap class that can help with alignment, or do I need to create CSS code to align the items in the div tag? <link href="ht ...

htmlbootstrap-5

The website appears as I envisioned it when using Raw HTML, but when implementing Django, a strange blank space materializes within the for loop

<div id="Project" class="bg-white fnt-white brdr project-div "> <div class="float-left image-for-project-container brdr"> <img src="{% static './Images/manworking.webp' %}" ...

htmlcssdjango

The value returned by $_GET is always 1

I'm struggling with passing a GET variable to another PHP page. My issue involves deleting rows from a table of content using AJAX. The Ajax function works flawlessly on a simple example with a form. Here is the code snippet: while($row=mysql_fe ...

phphtmlajaxformshtml-table

Encountering the "Thread 1: signal SIGABRT" error while trying to run a website on an app in Xcode

I've encountered an issue while setting up an app on my website. Everything was running smoothly until I tried to run the app and got hit with the error message: "Thread 1: signal SIGABRT". import UIKit @UIApplicationMain class AppDelegate: UIRespon ...

htmliosswiftxcode

I encountered an error stating "loadmodel is not defined" while I was using PHP and a JavaScript file with the type=module

Recently, I ventured into the world of THREE.js and WebGL, trying to load car models. My goal was to trigger a custom function through an onclick event listener that would extract an address from a data- attribute and pass it on to another custom function ...

javascripthtmlecmascript-6three.jswebgl