There seems to be a glitch with certain div elements not behaving as expected in Bootstrap version

I've been struggling with a persistent question lately that seems like it should have a simple solution, but I just can't seem to figure it out.

The issue I'm facing is related to Chrome and how certain divs on this particular page behave when resizing the browser window. Most of the divs resize properly, except for a few instances where they overlap each other. Specifically, between 768px and 991px (using media queries), the posts for National Wax Museum and Dublin Zoo overlap. This problem persists further down the page with other posts as well, although the majority of the page displays fine.

Interestingly enough, this issue doesn't occur in Firefox.

Additionally, when the screen width falls below 767px, most of the divs start overlapping vertically.

I've attempted various solutions such as adding 

<div class="clearfix"></div>
in different places, experimenting with different variations of col-**-4, and adjusting floats, but nothing seems to work.

Here's a sample of the post HTML:

... (post HTML code snippet) ...

CSS Styles Used:

... (CSS styles code snippet) ...

In Firefox, everything seems to be working fine. However, there's an additional issue where columns don't resize below 767px, which interestingly doesn't happen in Chrome!

If anyone has any insights or suggestions on how I can resolve these issues, I'd greatly appreciate it. I'm feeling pretty stuck at the moment.

Thanks in advance!

htmlcssresponsive-designtwitter-bootstrap-3

Answer №1

The URL you provided contains inline CSS within the div element, setting position:absolute along with left and top values. I recommend either deleting this inline style or attempting to override it using the following code:

@media (min-width: 768px){
    .tour-thumb {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      float: left;
    }
}

Answer №2

Thanks to the guidance of @Miktown, I incorporated the following CSS code to address the problem:

@media (min-width: 768px) and (max-width: 991px){
    .tour-thumb {
       width:50% !important;
    }

}
@media (max-width: 767px){
    .tour-thumb {
     width:96% !important;
    }

}

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

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

javascripthtmlcss

Is it possible to activate the jQuery .click() function for a button with specific text?

Here's a dilemma I'm facing: $('.add_to_cart span:contains("Choose a Size")').click(function() { console.log("it has been clicked") }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></s ...

javascripthtmljquery

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

cssreactjsnpmsasszurb-foundation

Alter numerous classifications based on varying circumstances at regular intervals

This code snippet is designed to change randomly all the <div class="percentx"> elements, for example from <div class="percent31"> to <div class="percent52"> (with values between 1-100). It works smoothly. I ...

javascripthtml

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

javascripthtmlcodemirror

Tweaking react-lottie and SVG dimensions with CSS media queries: A step-by-step guide

I am currently working on a React project that involves displaying Lottie-react animations and SVG's. My main concern is making sure that these illustrations are responsive on my website. The components are stored in a .js file, which I import into m ...

cssreactjsreact-componentlottie

The jQuery statements are not properly executing the if and else conditions

i'm currently assessing the condition using this particular code. jQuery(document).ready(function($){ $('#uitkering_funds').hide(); $('#uitkering_funds_hoofd').hide(); $('#partner_uitkering').hide(); $('#par ...

javascriptjqueryhtml

The text exceeds the width of the paragraph

Something very odd is happening, a rare occurrence in my over 20 years of web development experience. The text within the paragraph seems to be overflowing its boundaries: https://i.sstatic.net/bmB1zg7U.jpg My client specifically requested the Duffy Scri ...

htmlcssfont-face

Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

Can a panel defined in index.html be used on another page, such as results.html? Or do I have to define the panel on every page and duplicate the HTML code on each page? Because I want the panel to be consistent across all pages. This is the panel in my ...

javascriptjqueryhtmlcssjquery-mobile

Is it true that AngularJS is unable to update data attributes?

I'm working with an input element that utilizes the type-ahead plugin from bootstrap. My goal is to dynamically set the data-source attribute as the user types, creating a real-time search effect. <input id="test" data-provide="typeahead" data-sou ...

htmlangularjs

Changing SVG containing image tags into HTML canvas

I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...

javascriptjqueryhtmlsvg

Issue with Navbar Collapse Toggle not deactivating (following transition from bootstrap v4 beta to v4 alpha 6)

Recently, I encountered an issue with my navbar after switching to v4 alpha 6 in order to utilize the responsive utilities that this version offered. If you visit the following page: , you will see what I mean. Prior to upgrading to v4 alpha 6, all menu ...

jqueryhtmlcsstwitter-bootstrap

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

htmljquerycss

What is the best strategy for managing pagination when dealing with a large number of pages?

Up until now, I have understood that pagination only links different pages together. This works fine when dealing with a limited number of pages or posts to display. However, what if I have 30 or more pages to paginate? Wouldn't it be impractical to c ...

javascriptjqueryhtmlcsspagination

"CSS styles applied to the body element do not automatically transfer to the h1

Explore the World of Coding: <body class="pageDesign"> <h1>CSS - A Creative Journey</h1> <p><strong>Discover the beauty of coding</strong> and unlock a world of possibilities with CSS. Let your imagination soar as you d ...

htmlcss

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascriptcssreactjssemantic-ui

Having trouble with Vue image source file paths?

Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...

javascripthtmlvue.js

Issue encountered when toggling flip switch in Jquery Mobile

I am trying to create a calculator for my app using Jquery Mobile, but I am facing an issue with the flip toggle switch. Here is my script: <script type="text/javascript"> function dosis() { $peso = $('#peso').get(0).value $dosis = ...

javascripthtmljquery-mobile

Attempting to place the search bar within the navigation bar

Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far. Any assistance would be greatly appreciated, thank yo ...

javascripthtmljquerycss

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element. Here is the code I have written so far: function setBodyMinWidth(name){ var max = 0; $(nam ...

javascriptjqueryhtmlcsswidth