Mysterious HTML/CSS element causing page to stretch beyond limits

I am currently updating a website to make it responsive. Check it out here:

When the viewport is below 980px in width, a horizontal scroll bar appears and the html/body/container remains at 980px.

I've attempted to apply an inline width of 200px to all elements, but the page still appears stretched. I'm struggling to figure out what's causing this issue. Can anyone help identify the problem?

The issue was with the table in #fp-boxes. In Chrome's viewport, changing the widths didn't affect the page width without a refresh, which would then reset the forced widths back to their original values. Everything behaved correctly in Firefox's viewport.

htmlcss

Answer №1

After analyzing the website quickly, a number of issues have been identified.

Problem 1 - The Shopping Cart has a set margin-left property which is causing the page to expand (located in style.css line 88)

.m-shoppingbasket {
  width: 295px;
  position: absolute;
  margin-left: 739px;
  top: 6px;
  background: #8bbeb7;
}

Possible Solution - Eliminate the margin-left and instead use float right, adjusting as needed

Problem 2 - The feature boxes (fp-boxes) are using tables with fixed widths

            <td style="width: 334px; height: 201px;" valign="top">...</td>
            <td style="width: 334px;" valign="top">...</td>
            <td style="width: 334px;" valign="top">...</td>

Solution - Remove fixed widths and consider using a responsive grid or setting percentages. Using tables for displaying three boxes side by side might not be the best approach...

Additionally, a media query has been noticed (style.css line 733)

This issue can be addressed by implementing a responsive image class that allows featured promos to adapt based on table size

.img-responsive {
    display:block;
    max-width:100%;
    height:auto
}

Problem 3 - The footer text container has been assigned a width of 1000px (style.css line 610)

.footer-container .footer {
  width: 1000px;
  height: 80px;
  margin: 0 auto;
  padding-top: 20px;
}

Solution - Remove the specified width

While there may be additional issues present, addressing these should provide a good starting point.

Answer №2

@media (max-width:980px) and (min-width:300px) { 
      #wrapperselector { 
        max-width: 200px; 
        margin: 0 auto;
        overflow-y: hidden;
      }
}

It seems like there might be a problem with displaying all of your code in the issue.

If you are trying to force all elements to be 200px width, you may have done something like this;

* {
  width: 200px;
}

But be careful as that will stretch everything and is not recommended!

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

Apply a watermark specifically to fancybox for images in galleries, excluding non-gallery items

I recently encountered an issue with a FancyBox image gallery on my webpage. I wanted to add a watermark to the gallery items, so I followed an example from the FancyBox page at http://jsfiddle.net/w5gQS/. beforeShow: function () { $('<div class=" ...

javascriptjqueryhtmlcssfancybox-2

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

jquerycsshtml

AngularJS Encounter: A Grand 404 Glitch

Hey, I'm just getting started with AngularJS and following this helpful tutorial. However, I've run into an issue where the $http.get method is consistently giving me a 404 Error when trying to access a JSON file. The JSON file is located in the ...

htmljsonangularjs

What is the best way to vertically align Angular Material tabs?

In my current project, I decided to use angular material and encountered a problem with the angular material tab. I wanted to arrange the tabs vertically, but it doesn't seem to be working properly. The alignment seems off and it's not functionin ...

htmlangularjsangular-material

Has there been a recent issue with FireFox 3 where it fails to clear a float and does not recognize negative margins?

I've been searching online, but haven't come across a definitive answer yet. I'm interested in knowing if there is an issue with Firefox 3 when applying a negative margin to a div that is either clearing a float or containing another floated ...

cssfirefoxcss-floatmargin

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

javascripthtmlrandomescaping

The iframe remains unresponsive and fails to resize as needed

I am facing an issue while trying to embed an iframe into one of my websites. It seems that the responsiveness is lost and it does not scale properly on mobile devices. You can see the issue here. Interestingly, when I place the same iframe on a plain HTM ...

cssiframemobileresponsive

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface

A <div> with 100% height nested within a full-page div positioned at top:0 and bottom:0

Here's a simple problem. I need a full-height div (#inner) inside another full-height div (#outer, but with padding). This code displays correctly in Firefox and IE8, but not in IE7 and IE6. Edit: In the specific context where I'm using this s ...

htmlcssinternet-explorer

After filling out the form, the user's entered information is instantly shown on the same page

I want to create a form where my friend can input information that will be displayed on the same page. For example, when he enters the title in a text field and clicks submit, it should appear in the title box. Additionally, he should be able to enter va ...

jqueryhtmlcssajax

Check the radio box corresponding to the adjacent label

As a hobby, I have been exploring ways to automate questionnaires that I used to manually deal with for years. It has always intrigued me how best to streamline this process, and now I am taking the opportunity to indulge in my passion and enhance my JavaS ...

javascripthtmlautomationradio-button

Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

I found a code snippet in my DOM that sets the current date on a table. <table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> <tr ng-repeat="fd in getFullDayDate track by $index ...

jqueryhtmlcssangularjs

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

A unique code written in javascript using jQuery allows users to create a "box" on a website with each click of a button, triggering an alert message upon clicking the box. The process is as follows: 1) Clicking the "Add (#addBox)" button appends a new li ...

javascriptjqueryhtmlweb

When using AJAX POST requests, HTML links may become unresponsive

Scenario: Currently, I am developing a small-scale web application. The AJAX functionality is successfully sending data to create.php which then executes the necessary MySQL query. Upon completion of the AJAX request, a success message is appended to the d ...

javascriptphpjqueryhtmlajax

Deactivate Pagination with a Button-Based Approach

After conducting thorough research online, I have experimented with various approaches but unfortunately, none have proven successful. view image description here I am seeking guidance on how to disable pagination when clicking on the replace button. Due ...

htmlcssangularjs

JQuery automatically selects an action upon 'change' event, but does not do so upon 'select' event

I'm hoping my explanation was clear. I have a text input field that utilizes the jQuery UI autoselect function. When a user selects an option, the input field auto-fills correctly. However, I encounter an issue when a user types something but does not ...

javascriptjqueryhtmljquery-uijquery-ui-autocomplete

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

javascriptjqueryhtmlcsscopy

Can someone help me figure out how to make my Dropdown stay open when I highlight input, drag, and release

While working with the react bootstrap Dropdown component, I've encountered a specific behavior that is causing some trouble. To better illustrate the issue, I've attached some images. In my dropdown, there is an input filter box along with a li ...

javascripthtmlreactjs

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries

fullcalendar adjusting color while being moved

Currently, I have implemented a fullcalendar feature that displays entries for multiple users with different colored calendars. However, there seems to be an issue when dragging an entry to another date - the color reverts back to default. Below is an exa ...

jquerycssjsonfullcalendar