Browser resize affects the overlap of DIVs

I've seen similar posts before, but I believe the issue with my website (***) is unique.

At full size, the website looks exactly how I want it to. However, when I resize the browser window, the text ("ABOUT INTERNATIONAL PARK OF COMMERCE.." and below) overlaps with the dark grey sub navigation on the left.

I'm struggling to identify the cause of this problem as I can't share all of the HTML and CSS code due to some elements being part of my Wordpress blog theme, which includes around 20 different scripts.

Initially, I thought it had something to do with the layout where the grey menu takes up 2 columns and the text takes up 9 in a total of 12 columns. But now, that explanation doesn't seem logical to me anymore.

Is this a common issue with responsive divs?

htmlcsswordpressoverlap

Answer №1

The .span2 table on your website is currently set to a minimum width of 170px, causing it to overlap with the .span9 element. Adjusting the table width to be 100% should resolve this issue. Alternatively, you might want to consider using .span3 and .span8 instead.

[update] Have you thought about experimenting with different combinations like .span3 and .span8 for a better layout?

Answer №2

Ensuring that your div elements are responsive can be challenging, especially when using fixed measurements like pixels. Consider using percentages instead for better adaptability. When it comes to fonts, ems work well as they allow you to adjust text size within media queries and scale content accordingly.

For instance, removing the min-width property can help resolve overlap issues.

Replace this code:

.whatwhat {
  min-width: 400px;
  overflow: auto;
  float: right;
 }

With this updated version:

.whatwhat {
  overflow: auto;
  float: right;
}

By making these changes, you can prevent text from spilling outside of the div during resizing.

Answer №3

Upon examining the window overlap between 768px and 979px, it was discovered that there is an issue with the media queries.

@media (min-width: 768px) and (max-width: 979px)
.span9 {
width: 538px;
}

A potential solution to this problem involves adjusting the CSS as shown below:

   @media (min-width: 768px) and (max-width: 979px)
    .span9 {
    width: 470px;
    }

Answer №4

The reason for this issue is due to the discrepancy between the assigned width of .span2 in the stylesheet and its actual size. For instance, when the screen size is 1199px, the specified width for .span2 is width:140px;, but in reality, it measures 196 pixels wide.

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

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

htmlcss

Any tips on creating a smooth fade effect for Bootstrap tabs when sliding to the edges on smaller screens?

Is it possible to make the text fade when it reaches the red highlighted area and also on the search icon on the left? These tabs slide left and right on smaller screens as they are bootstrap tabs. I attempted to add opacity to the text at (min-width: 320p ...

htmlcssbootstrap-5

Apache Wicket - Utilizing HTML5 details element within a RepeatingView to save open property

In my repeatingview, I have HTML5 detail elements that can be opened or collapsed by the user. However, when I remove certain elements from the repeatingview and then reload it using target.add(container), all elements end up being collapsed again. How c ...

javahtmlwicket

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

htmlcss

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

javascriptcssreactjsmaterial-ui

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

htmlcssreactjswebmaterial-ui

Substitute the information in the table with new data

I am working with an HTML table that has 5 columns, one of which contains dates. I need to convert the date format only if the data is not empty. To achieve this, I am utilizing moment.js for date formatting. While the date format conversion works perfect ...

javascripthtmljquerycss

HTML: arranged <pre> with fixed positioning

I currently have a centered column of text with a fixed width. However, I am looking to break that fixed width for certain tags like <pre> so that they can fill the full screen width while maintaining flow with the rest of the text. My CSS snippet s ...

htmlcsslayout

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

Two columns with one column having a fixed width

I am looking to create a layout with two columns, one for content and the other for a sidebox. The sidebox should have a fixed width while the content column can shrink as needed. Eventually, both columns will stack to 100% width, but I want the content c ...

htmlcss

Looping through multi-dimensional JSON objects with jQuery

Hello there, I'm currently facing some challenges in getting the screen below to work properly: Project progress screen I have generated the following JSON data from PHP and MYSQL. My goal is to display the project alongside user images and names whe ...

javascriptjqueryhtmlarraysjson

How to interact with a button inside a span element without an ID using Selenium

Can anyone help me figure out how to click a button in the browser using Selenium and Python? The button I am trying to click is located within this HTML code: <div id="generate"> <i class="fa fa-bolt"></i> <span>D ...

pythonhtmlselenium

Ways to efficiently display elements in a grid in real-time

Attempting to design a layout where each row consists of 3 cards using Bootstrap's Grid layout for responsiveness. The challenge lies in the fact that the card data is stored in JSON format, and the length of the JSON Object array may vary, leading t ...

javascriptcssvue.jsgrid-layoutbootstrap-vue

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

javascripthtmlcssweb

HTML: Image not updating despite meta tag refresh

I am using the following HTML5 code to display an HTML page with an image (1.JPG). The setup is working correctly, but I am encountering an issue. The image at the specified path is supposed to be randomly replaced with a newer image within a certain tim ...

html

What are the best ways to optimize and capitalize on functionality in Electron.js?

After creating three custom buttons for the close, maximize, and minimize functions in Electron.js, I encountered an issue. While the close button is functioning properly, I am struggling with implementing the maximize and minimize buttons. In fact, I have ...

javascripthtmlcsselectron

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

htmlcssreactjsmaterial-ui

What is the reason for the exclusion of the viewport meta tag from the standard guidelines?

Emphasizing the significance of incorporating the viewport meta tag, various sources stress its role in controlling layout on mobile browsers. According to information from MDN's article Using the viewport meta tag to control layout on mobile browsers ...

htmlviewportmeta-tags

Pressing a button within an HTML table to retrieve the corresponding value in that row

How can I click a button inside an HTML table, get the value on the same row and pass it to an input field called FullName? Thanks for your help! <td><?php echo $r['signatoryname'] ?></td> <td ...

javascriptphpjqueryhtml

Steps to add a background image without a border:

I am struggling to insert an image within an anchor tag. <a> <img calss="imageclass"/></a> Whenever I try, a border appears around the image. I have attempted using CSS properties like border: 0 and border-style:none, but nothing seems ...

htmlcssimage