The vertical overflow from using Bootstrap grid extends into neighboring divs

There is quite a bit of code in this one, so I've decided to showcase it in a codepen. https://codepen.io/anon/pen/WMyQEJ

Essentially, I'm utilizing @media queries to expand the #about div in order to accommodate my content that spills over into another div on mobile devices. The aim is to have the blue background extend below the placeholder image to create a seamless section.

Here's the specific Media Query:

   /*MOBILE SUPPORT*/
  @media screen and (max-width: 768px) {
    #about {
    height: 120vh !important;
      background: rgb(12, 18, 71);
      background-size: cover;
    }
}
htmlcssoverflowtwitter-bootstrap-4

Answer №1

Adjust the height to auto

/*RESPONSIVE DESIGN*/
@media screen and (max-width: 768px) {
    #about {
      height: auto !important;
      background: rgb(12, 18, 71);
      background-size: cover;
    }
}

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

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

htmlcss

My index.html not successfully linking to the CSS file

I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but noth ...

htmlcssindexingstylesheet

Following the same occurrence using varying mouse clicks

I am currently exploring the most effective method for tracking file downloads (specifically, pdf files) on my website using Google Analytics (UA). I understand that by utilizing <a href="book.pdf" onClick="ga('send','event','P ...

javascripthtmlgoogle-analytics

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

javascriptcsshtmllightbox

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Below is the code snippet I am currently working on: function send_data() { var a=$("#username").val(); var b=$("#password").val(); $.post("http://localhost/login/login.php", {uname: a, pswd: b}, function(data) { $("#result").html(data); }); ...

javascriptphpjqueryhtmlajax

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: ht ...

htmltwitter-bootstrapcss

Using Javascript to choose an option from a dropdown menu

const salesRepSelect = document.querySelector('select[name^="salesrep"]'); for (let option of salesRepSelect.options) { if (option.value === 'Bruce Jones') { option.selected = true; break; } } Can someone please ...

javascriptjqueryhtml

In need of a solution for this peculiar problem with an html table and css. Let's

Encountering an unusual issue with my table content .table { position:absolute; top:12px; left:3px; width:87px; height:74px; } .table tr { vertical-align:middle; } .table td { text-align:center; padding:1px;color:#000000; font-siz ...

htmlcsshtml-table

Can you explain the significance of allow_blank and style = {`base_template` : `textarea.html`} in Django when used as attributes of a CharField?

Currently, I am delving into the world of Django REST framework through a step-by-step Tutorial. The Tutorial introduces serializers that function much like Django's forms to facilitate the serialization and deserialization of snippet instances into ...

pythonhtmljsondjango

Tips on creating adaptable images for mobile viewing

My coding conundrum involves the use of two columns - one for an image and the other for a description of that image. However, when viewing my site on mobile devices, the image is cut off at only half its height. Adjusting both columns to col-sm-6 results ...

javascripthtmlcss

What is the best way to retrieve the parent element quickly using Jquery?

html: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input class="spinner1 ui-spinner-input" id="q1" name="value" value="1" min="1" aria-valuemin="1" aria-valuenow="2" autocomplete="off" role="spinbutton"><a class="ui ...

jqueryhtml

Ensure that all checkboxes are only selected within a single table

I have a challenge with selecting all check boxes in multiple tables when the header check box is selected. I am attempting to achieve this using jQuery without needing to parse or pass in the table id. Currently, when I select one header check box, all th ...

javascriptjqueryhtmlcheckbox

Can CSS alone be used to provide a cover for auto-scaling images?

One common technique is using max-height and max-width to make an image automatically fit in a div, as shown below: .cover img { max-width: 100%; max-height: 100%; } But is there a way to create a translucent cover (with opacity set to 0.8) that ...

htmlimagecss

Arranging particular placement

How can I position my links to the right of the second photo (opus1) and slightly below the first photo (coverPhoto)? I've tried various methods but haven't found a simple solution yet. <!DOCTYPE html> <html lang="en"> <head ...

htmlcss

Troubleshooting issue with RadioButton check change not updating in onPost event in ASP.Net project utilizing Bootstrap HTML and C

Having created two radio buttons, grouped them together, and applied bootstrap classes for styling; I am encountering an issue where the values of the radio buttons are not updating when clicked and submitted. Interestingly, the checkboxes on the same form ...

c#htmlasp.netrazor

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

javascripthtmlangulartypescript

Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges: The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to typ ...

htmlcss

What is the best way to create a flawless circular image with a card in Bootstrap 5?

For my project, I incorporated Bootstrap version 5 cards. I attempted to create a perfect circle image by utilizing the Bootstrap class "rounded-circle", however, the resulting image ended up appearing oval in shape. Below is the code snippet: <img src ...

htmlcssbootstrap-5

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

javascriptjqueryhtmlcss

Divergent find function behavior in jQuery when applied to div or tbody

I've encountered an issue while using the jQuery find selector by Id with a div and tbody. Let me simplify my problem for better understanding. HTML <div id='iamdiv'>HELLO</div> <table> <tbody id='iamtbody' ...

javascriptjqueryhtmlcssselector