Unusual empty area appearing on the right side (noticed when zoomed in or on mobile gadgets)

I have been working on my website for a few months now and recently encountered a persistent issue.

Despite setting the main width of my website to '975px', I am seeing a white border on the right side after zooming in or when viewing on a mobile device with a smaller width. It seems like there might be a misplaced width or padding value causing this. I want to ensure that the main container, header, and footer stay centered on the page even after zooming in. Have I overlooked something in my CSS? How should I modify it to achieve this desired layout? Any help would be greatly appreciated!

  • Website:
  • CSS:

Regards & Thanks for the assistance!

htmlcssweb

Answer №1

Your header class width is the main issue here. Adjust it to width:100% and the problem will be resolved

.header {
width: 100%;
height: 250px;
background: url(http://www.mywebsite.com/img/myimage.jpg) no-repeat;
position: relative;
background-position-x: 60px;
}

Answer №2

The particular line that seems to be causing issues is:

<ul class="nav-list" style="float: none; width: 25em;">

It appears that the width:25em; property is overflowing.

Answer №3

A few factors seem to be contributing to the problem you're experiencing. In order to address it, consider implementing max-width: 100% within the .container class, while removing both float: right; and width: 400px from the .nav element as they are causing an overflow.

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

Issue with onClick function causing failure to generate options in select menu

function getOption(){ var select = document.getElementById("dynamic-select"); if(select.options.length > 0) { var option = select.options[select.selectedIndex]; alert("Text: " + option.text + "\nValue: " + option.value); ...

javascriptjqueryhtmlcssbootstrap-4

Is there a way to verify if all the div elements are set to display as none?

If all div elements are set to display:none, I want to display a message saying "No result found" element.each(function(i, el) { if (all elements are set to display:none) { no result found } } <div class="a" data-key="a ...

htmljquery

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

How do I go about uploading the code as instructed on the platform's e-commerce details page?

.mk_01{ color: #000000; font-size: 30px; font-style: normal; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; text-align: center; } .mk_02{ color: #000000; fon ...

htmlcss

Unable to access individual checkbox with Selenium in Java

I am looking to select the Store Pickup Available checkbox on the following page: http://www.target.com/c/pants-shorts-baby-toddler-boys-clothing/-/N-59yk1#navigation=true&viewType=medium&sortBy=newest&isleaf=true&navigationPath=59yk1& ...

javahtmlseleniumxpathcheckbox

Ways to rearrange div elements using JavaScript

I need assistance with reordering div elements using JavaScript, as I am unsure of how to accomplish this task. Specifically, I have two divs implemented in HTML, and I would like the div with id="navigation" to appear after the div with class="row subhea ...

javascriptjquerycss

Creating a dynamic drop down list in PHP populated from an SQL table with the added feature of displaying a default form value that changes based on user input

Currently, I am in the process of developing a form that allows users to modify demographic information about a member. One of the requirements is to include a dropdown list in an HTML form using PHP and also display a default value based on a specific ent ...

phphtmlformsmysqli

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Looking for a solution to hide scroll bars in Microsoft Chrome, but only when there is no content to scroll? The current div and styles always show the horizontal and vertical scroll bars, even when the height exceeds the content. <div style="backgroun ...

javascripthtmlcss

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss

What is the best way to align the bottom of an element with the browser buttons panel on mobile devices?

When viewing the website on a mobile device, I noticed that the floating button is hidden behind the browser buttons panel. Is there a way to adjust the positioning of the element relative to the browser's buttons panel? I attempted using env(safe-ar ...

htmlcssmobile

Is there a way for me to retrieve the input text value and display it in my modal window?

When using jQuery, I want my text field to appear in my modal. The code seems to work fine when I check the checkbox, but nothing shows up when I try to use the text field. How can I resolve this issue? Body <body> <div id="hasildetail" clas ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Prevent Image Clicks & Protect Text from Copying with HTML and CSS

So, I have an image that is supposed to direct you to a specific URL when clicked. However, the image is currently unclickable and there's a text box below it that cannot be copied. This issue arose after I used CSS to position the image and text box. ...

htmlcss

Transferring Data through the POST Method

Is there a way for me to send just one variable using the post method? I have retrieved the $row[id] from the database and need to include it in the form submission. We know how to send user input using dfs, but what about sending the specific $row[id] v ...

phphtmlpost

Utilizing Javascript to set the innerHTML as the value of a form

I have written a JavaScript code that utilizes the innerHTML function, as shown below: <script> var x = document.getElementById("gps"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showP ...

javascripthtml

How can JQuery determine the current CSS background image of a three-state icon or button?

I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS. There are no issues with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } ...

jquerycssbackground-image

Utilizing CSS animation triggered by a timer to produce a pulsating heartbeat effect

Here's a unique way to achieve a heartbeat effect on a spinning circle. The goal is to have the circle double in size every second and then shrink back to its original size, resembling a heartbeat. To achieve this, a JavaScript timer is set up to remo ...

javascriptcsscss-animations

What is the best way to fill in columns with data, adding one entry per column each time and repeating the process in a loop?

I am looking to display multiple posts on a page within 3 columns: column 1 | column 2 | column 3 | The desired outcome is: column 1 | column 2 | column 3 | post1 post2 post3 post4 post5 post6 ... For instance, the HTML code appe ...

phpjqueryhtmlforeachmultiple-columns

The Ajax request was a success, but I am unable to retrieve radio button values from the $_POST variable

My website operates fully asynchronously, generating and destroying HTML elements on button clicks that prevent navigation. In this section, I am creating a form with an array of radio boxes for rating from 1 to 10. This form is submitted using jQuery.aja ...

javascriptphpjqueryhtmlajax