Overflow-x in HTML5 Websites

I recently launched my website in the "alpha" stage -

I have implemented full mobile support using media queries. It displays perfectly when the browser window is resized, but I noticed a strange space to the right of everything on my Samsung Galaxy Note 2 with a width of 720 pixels. The extra space is only filled with the background of the page.

I have tried setting widths to 100% and using overflow-x hidden on multiple elements, but the issue persists.

You can see the problem for yourself by visiting the link above.

Here is how the site appears on my mobile device:

https://i.sstatic.net/27wJc.png

Does anyone have any suggestions?

Below are the links to all stylesheets controlling the main mobile aspects of the website: - -

Here is the HTML code for the header:

<html>
<head>
    <title>Flat Designs</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" media="only screen and (min-width: 811px)"href="mainstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 810px) and (min-width: 721px)" href="tabstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 720px) and (min-width: 521px)" href="mobilestyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 520px) and (min-width: 431px)" href="tinystyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 430px) and (min-width: 1px)" href="smalleststyle.css">
    <link rel="shortcut icon" href="http://www.iconj.com/ico/9/e/9ecev208p2.ico" type="image/x-icon" />

    <link href='http://fonts.googleapis.com/css?family=Ropa+Sans:400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

</head>
csshtmlmobilemedia-queriesfluid-layout

Answer №1

It appears that the culprit lies in the way you've styled the elements in your footer. Removing the relative positioning and left property seems to resolve the issue.

about {
  position: relative; /* No longer necessary */
  left: 30%; /* Issue fixed by removing this */
  color: #666;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
}

You are utilizing relative positioning for all footer elements without a clear purpose. Taking the #about element as an example; to achieve the desired effect, it is recommended to remove the relative positioning and left value, and instead set the text-align property to center.

about {
  color: #666;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
  text-align: center;
}

Remember to use relative positioning only when you need precise control over an element's positioning outside of the document flow.

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

Declaring an array that holds Angular components in Angular 11: What's the best approach?

I'm trying to implement a feature in my Angular component where I can create a list that displays content from other components. My current approach involves declaring an array that contains references to different Angular components: import { Compone ...

htmlangulartypescript

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

Determine if the html element is wrapping to a new line when zoomed in or when the text size on Windows is increased

My webpage has 2 labels displayed side by side, but due to the system text size being set at 150% (which is recommended) in Windows, the second label does not have enough space and gets pushed below the first label. I am looking for a way to determine if t ...

javascripthtmlcsswindowsbootstrap-5

Block users from viewing the image displayed within a JavaScript canvas

On my server, I have a path to an image that is accessed by a JavaScript to load the image onto a canvas. The script then proceeds to hide certain parts of the image using black layers. The issue arises when a user can easily view my JavaScript code, extr ...

javascripthtmlcanvas

Eliminating unused CSS space on a website

I am in need of assistance with removing the white space between the border of the Marquee text and the slider image on my website. I realize this may not be the appropriate place to ask, but any help would truly save my day. You can view the issue at . ...

htmlcss

Using jQuery in Rails 3 to display the id of a td element

I am working with a 3x3 table that contains td elements with unique id's (id='a1'...id='c3'). I want to enable the user to click on any of these 9 td elements and receive an alert displaying the id of the clicked td. Below is my C ...

javascripthtmlruby-on-rails-3jquery-uicoffeescript

What is the best option: using a Javascript template or exploring another

Just starting out in web development. I want to include the same menu on every page of my new website, but I don't want to manually update it in each file whenever there's a change. Is there an easy template engine for JavaScript or another sol ...

javascripthtmltemplates

Issue with Tooltip Position when Scrolling Sidebar is causing display problems

My goal is to create a Sidebar with Tooltip attached to its <li> elements similar to this example: Screenshot - Good Tooltip However, I am facing an issue where the position of the Tooltip breaks when scrolling to the bottom of the sidebar, causing ...

javascripthtmlcss

Creating Your Own Image Hosting Website: Learn how to consistently display an HTML file with a specific image from the URL

I'm currently in the process of developing my own image hosting site at Everything is functioning as intended, but I am looking to make a change. Currently, when a shared image link is opened, it only displays the image. However, I would like it to ...

javascripthtmlregex.htaccess

Is there a way to ensure consistent border thickness in a material-ui table layout?

In my current setup of a material UI table, I have applied a 1-pixel thickness to all elements. This leads to a slightly thicker appearance at the points where two cells meet compared to the outer edges. How can I achieve a consistent border width of 1px ...

cssmaterial-uifrontend

Using CSS3, you can apply multiple backgrounds to an unordered list with one set

Currently, I am in the process of working on a unique Wordpress template. One of the challenges I am facing is figuring out how to incorporate three background images for each <li> element in the dynamically generated navigation menu. Here are two ex ...

htmlcsswordpresshtml-listsbackground-image

Tips for transforming Javascript, CSS, and HTML elements into an engaging interactive PDF or .h5p page

I have developed a unique web application that allows users to place dots on a sitemap and link them to images. The technology stack includes Javascript, CSS, and HTML. phase1 Subscribed users are able to utilize a wide range of features which enable them ...

htmlpdf

What could be causing the submit button on this form to not be centered by this CSS?

I have been attempting to center this submit button using CSS, however, despite researching various online resources, I have not yet discovered a solution. It seems strange that such a simple task is proving to be so challenging. td.class > div { w ...

htmlcss

What causes discrepancies in CSS design across different browsers?

I have implemented the following CSS and HTML code to display an L shape before a span, but its appearance differs across different browsers. In Mozilla Firefox https://i.sstatic.net/1rCoJ.png and In Safari https://i.sstatic.net/YKiJ7.png .bulletInli ...

htmlcss

Passing input values to a textarea in Jquery

Currently, I am attempting to transfer the value from a textbox to a textarea. However, I am struggling with how to append this new value alongside any existing content in the textarea. $('#firstnametxt').change(function () { $(& ...

jqueryhtml

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

Using images in R Shiny with htmlTemplate: A step-by-step guide

In my current project, I have a file named template.html that I am loading using the code snippet below: https://i.sstatic.net/TipvS.png One issue I'm facing is including an image in this template.html file. Despite having the correct relative path ...

htmlrshiny

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

Whenever I attempt to apply float left or display inline, it causes issues. The form currently has a max-width of 1000px. I was hoping that the first and last names would automatically align side by side if there is enough space. Perhaps setting a min-widt ...

htmlcssinlinedisplay

What is the best method to adjust the scrollbar to the correct position on the table?

Currently facing an issue with adding a scrollbar on the right side of my table. I have tried using a jQuery plugin called table_scroll.js but encountering difficulties. The problem can be seen in this image: https://i.sstatic.net/XqLBD.png. Any assistan ...

jqueryhtmlcssbootstrap-table

Using Angular with OpenStreetMap and $routeProvider allows for dynamic routing and

Check out this awesome single page app that I found: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/simple-example.html However, I am looking to enhance it by adding a menu... <html ng-app="App"> <head> <lin ...

javascriptjqueryhtmlajaxangularjs