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

Question

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!

html css responsive-design twitter-bootstrap-3

Answer 1

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

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 3

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;
    }

}

Answer 4

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;
    }

}

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

Answer №1

Answer №2

Similar questions

Comparing iPad and Desktop Devices

The browser does not support the display of Spanish special characters

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

What is the best way to add multiple lines of text to a webpage using the span element?

The problem with clearing floats in IE7 (as well as 6)

A guide on how to efficiently retrieve all images stored in a specific directory

Matching multiple divs with different ids in PHP using preg_match_all and regex

Circular picture contained within a Bootstrap column on an irregularly-shaped image file

What is the process for adjusting the color of the browser tab?

Tips for accessing a URL with a specific value in the HTML file

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

Unable to display PHP response in a div using AJAX - issue persisting

Embed an HTML element within a DIV container

Creating links to external websites in PHP files

Tips for adjusting alignment in MaterializeWould you like to change the alignment

My div is currently being concealed by a jQuery script that is hiding all of its

How to dynamically adjust font size using Javascript

One of my AngularJS directives seems to be malfunctioning while the rest are working fine. Can you help me troubleshoot

JSFiddle Functioning Properly, But Documents Are Not Loading

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?