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

Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example: <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-pre ...

javascriptcssruby-on-railspathassets

What is the best way to make an image expand when clicked, align it in the center of the webpage, and have it return to its original position with just one more click by utilizing

Currently, this is the code I am working with. The JavaScript functionality is working well, however, there seems to be an issue where the image does not return to its original size on a second click. Additionally, I am having trouble getting the CSS to ce ...

javascripthtmlcssimage

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

javascriptjqueryhtmlcsstwitter-bootstrap

The text alongside the radio button is not aligned vertically

Hello, I am attempting to vertically align text next to my radio button but encountering some issues. .radio { cursor: pointer; display: inline-flex; } .cui-a-radio-button__input { display: none; } .cui-a-radio-button__input:disabled + .cui-a-rad ...

htmlcss

What is the best way to locate the final text node within the <p> element?

Looking at the code below, my goal is to identify and retrieve the text node that serves as the last child element. <p class="western" style="margin-bottom: 0.14in"> <font color="#000000"> <font face="Arial, serif"> <font ...

javascriptjqueryhtmlcss

Modify the variable to encompass a multitude of hues - scss

Hello, I am looking to modify the background of a page for dark mode. This is the current background styling: $orangeLight:#FFA500!default; $redLight:#FA8072!default; $blueLight:#B0C4DE!default; $greenLight:#90EE90!default; $list2: $blueLight 0%,$blueLi ...

csssass

Ways to resolve the issue of being unable to retrieve data using jQuery

My code is working, but I am facing a little annoying problem that I can't solve on my own. The problem is that I can only retrieve the first record (id) from my data grid, but I can't retrieve the second or any other record id. For example: W ...

phpjqueryhtmlajax

Ways to relocate the menu within the confines of the "menu border"

Is it possible to move the menu inside the border on this webpage? I am new to web design and was thinking of using position:absolute for the links. Should I also move the submenu along with it? Any suggestions on how to achieve this? Thank you! The goal ...

htmlcssmenuposition

How can I correct the code that is running both the if and else statements simultaneously?

In the code snippet below, a comparison is made between a username and password. If both are correct, the user is redirected to another page. However, there seems to be an issue where both the if and else statements are executing. Code: if (isset($_POST[ ...

phphtml

What is the best way to specify attributes such as font size and padding for the mobile version in AMP for email?

I attempted to utilize media queries to create a responsive AMP email, but it seems that this feature is not supported in AMP. However, I discovered that you can define media="(max-width: 599px)" and media="(min-width: 600px)" for , but the same ...

htmlmedia-queriesamp-htmlamp-email

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Creating an animated background slide presentation

After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery ...

javascriptjqueryhtmlcss

I'm having trouble getting my button to work with addEventListener while using Ejs and Express. What could

Creating a Twitter-like platform where I can post tweets and have them display on the same page has been quite challenging. I've set up each post to have an Edit button initially hidden with 'display:none'. However, when I try to click on th ...

javascripthtmlnode.jsexpressejs

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

Incorporating user input into a div element

So, I'm in the process of building my own Task Tracker using JavaScript to enhance my skills, but I've hit a roadblock. I successfully implemented adding a new div with user-inputted tasks, however, there's no styling involved. <div cla ...

javascripthtmlcss

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

In my PHP page, there are 12 individual forms with unique form IDs, checkboxes, and dropdowns. Take a look at this image: https://i.stack.imgur.com/pODzk.png Each form has an Update Zone that fetches Name, Enable status, Time, Dim information, and sends ...

javascriptphpjqueryhtmlajax

Instructions for creating a background within a container and positioning text in the center of the image utilizing HTML and CSS

I am currently learning HTML, CSS, and JavaScript. I am in the process of building my very first website, but I have encountered a problem. I am struggling to change the background color within the container beneath the images to a specific color (#82b5cf) ...

htmlcsssass

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Pause the counter based on the data attribute containing multiple values

I have a collection of div elements, each with a unique data-attribute value. My goal is to display these values in the divs using JavaScript by incrementing a counter. const numbers = document.querySelectorAll(".number"); console.log(numbers); let c ...

javascripthtml

Banner Placement

Is there a way to arrange 3 banners without using absolute positioning? I prefer to use relative positioning so that the footer doesn't overlap with the page. How can I achieve this layout? .bms { height: 810px; left: 0; position: absolute; ...

htmlcss