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:

The issue arises when transitioning to responsive mode, causing the top row from the image to display incorrectly, leaving some grid cells out of view. Additionally, the footer ends up stacking over the row instead of being placed below it. This image shows the problem:

Provided is a snippet of the code:

/* HOME INFO
-------------------------------------------------- */

.row-home-info {
    height: 300px;
    background-color: #586f56;
    padding: 0 !important;
}

... (CSS code continuation) ...

Seeking guidance on resolving this issue. The main concern seems related to the fixed heights set for the primary rows, but attempts with min-height adjustments have not yielded success. It might be a simple fix that I am overlooking, but despite a week of investigation and trial-and-error, a solution remains elusive.

Hoping for some enlightenment on this matter.

Best regards,

htmltwitter-bootstrapcss

Answer №1

Is there a specific reason for not overriding the fixed height on main rows within a media query? Are these heights necessary for mobile versions?

@media (max-width: 991px) {
   .row-home-info {
     height:auto;      
   }

  .home-col-contacto > .row {
    height:auto !important;      
   }

}

View Demo

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

bootstrap modal opens but remains hidden

I seem to be encountering an issue with the Bootstrap modal. The modal opens up, but for some reason it is not visible on the screen. Oddly enough, all the elements are present within the modal. Below is the code snippet: <button type="button" data-to ...

jquerytwitter-bootstrap

Extracting data from a tiered website within a specialized niche

I am currently attempting to scrape data from the webpage: "https://esco.ec.europa.eu/en/classification/skill_main". Specifically, I want to click on all the plus buttons under S-skills until no more plus buttons can be found, and then save the page source ...

pythonhtmlselenium-webdriverweb-scraping

Adding a CSS class to an HTML element using JQuery

I have a collection of tabs, and I want to dynamically add an <hr> element with the class "break-sec" when a certain class is active. This element should be placed within a <span> element with the class "vc_tta-title-text" after the text. Here ...

javascriptjqueryhtmlcssvisual-composer

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

javascriptjqueryhtmlundefined

Images positioned next to each other appear distorted when adjusting for different screen sizes

I have been struggling with this issue for quite some time and I just can't seem to get it right. My goal is to display two images side by side with a gap between them. The problem arises when the browser is resized, as the gap disappears and the im ...

htmlcss

What is the best way to determine if an image already exists in a database where the objects are spread across two distinct SQL tables?

Currently, I am working on a project using classic ASP and SQL. In this project, I have an input box where the image name is entered by the user after clicking the "Update" button. Upon clicking the update button, pre-existing images are displayed in a tab ...

htmlsql-serverasp-classic

Tips on moving a square along the z axis in three.js

Can anyone provide assistance with translating a square on the z axis in three.js? I would appreciate any examples or guidance on the best approach to achieve this. ...

javascripthtmltransformthree.jswebgl

Error 410: The Webpage has Disappeared

Unfortunately, my website fell victim to a hacking attack that resulted in the addition of numerous unwanted pages. These pages were quickly indexed by Google, causing a significant drop in traffic. The names of these pages all follow a similar pattern, s ...

html.htaccesshttp-redirect

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

htmlcssimageborder

Using a JavaScript if statement to check the height of a specific HTML element

I have been struggling to figure out how to insert an if-else statement in JavaScript that references data about an HTML element. My objective is to create an "onclick" function that enlarges an image with a 200ms delay and another function that returns th ...

javascriptjqueryhtml

Controlling the window opener; Inserting text into an element in the parent window

A pop-up window allows users to select files, then displays the selected image's URL. However, I need to take additional steps beyond that. I am seeking a method to input the URL into an input element on the parent window. window.opener.document.wri ...

javascriptjqueryhtml

Tips for generating an input element using JavaScript without the need for it to have the ":valid" attribute for styling with CSS

My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...

javascripthtmlcss

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

javascriptjqueryhtmlcss

What is the best way to incorporate a text box along with a submit button that triggers a callback to a javascript function when clicked, utilizing either plain javascript or jQuery?

As a beginner in the world of JavaScript, I'm struggling to find the solution to this problem. Any assistance would be greatly welcomed. ...

javascriptjqueryhtml

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing a 1900 x 1080 image within a div as the background <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ ...

javascriptjqueryhtmlcssimage

Scroll effect for read-only text input with long content inside a div

Is there a way to replicate the scroll functionality of a text input with readonly="readonly"? When the text exceeds the box size, you can highlight and scroll to view it all without a visible scrollbar. I am interested in achieving this effect within a p ...

javascripthtmlcss

view multiple HTML documents simultaneously in a single browser tab

Currently, I am in the process of building a wiki and have included tables in various sections. I want to showcase these tables on the main page as well. Rather than constantly copying and pasting them, I'm looking for a way to have the main page auto ...

javascripthtmlcsswiki

Widget being affected by centering CSS styling

My CSS centering code seems to be causing an issue with a widget, as it gets pushed down below the columns. Additionally, the nav bar widget appears on all forum pages. Your assistance in resolving this problem would be greatly appreciated. Thank you. Ch ...

htmlcss

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

javascripthtmlreactjsdom

How can I resolve the issue with the HTML/CSS footer not functioning properly on Safari for iPhone in my mobile site?

Struggling with a mobile website issue here. The client wants text-based buttons/links at the bottom, so I added them in, but my skills with size percentages are a bit rusty. I need these buttons to line up horizontally and adjust their width accordingly ...

htmliphonecssmobilefooter