Tips for eliminating annoying white space on petite gadgets with css programming?

Having an issue with my static html page where I am seeing white space on the right side when checking responsiveness. I have tried multiple solutions found here on stack overflow, including adding the following code:

I attempted to add this inline:

html, body {
    font: normal 16px sans-serif;
    color: #555;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

Unfortunately, it didn't fix the issue. I then added this to my CSS file:

html, body {
  font: normal 16px sans-serif;
  color: #555;
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

Still no success. Here is the page I am working on for reference: demo

Any ideas on what might be causing this issue?

htmlcss

Answer №1

The problem arises from the .Navbar element extending beyond 100% of the viewport

https://i.stack.imgur.com/eG5wp.png

By adjusting the left offset from 30px to either width: calc(100% - 30px) or setting left: 0, and reorganizing the space/size of the inner elements, the issue can be resolved.

Answer №2

To improve the layout of your website, make sure to include "position: relative" in your CSS body and add "!important" to your margin as shown below:

html, body {
  font: normal 16px sans-serif;
  color: #555;
  box-sizing: border-box; 
  margin: 0 !important;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

Next, adjust the positioning of your menu by increasing the padding in your .main-banner section with the following code:

.main-banner {
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100%;
    height: 100%;
    padding: 20px 65px;

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

Animating rows in the grid auto property

I am working with a basic css grid that contains X number of grid items. These grid items can vary in size and I need to implement an expander feature. The goal is to initially display only a certain number of rows, but upon clicking a button, the grid wil ...

csscss-transitionscss-grid

Using different CSS classes interchangeably in AngularJS

Imagine you have a list with an unknown number of items, ranging from one to potentially dozens. You want to display five CSS classes in a regular alternating pattern. What would be the most effective approach to achieve this? Here is some sample HTML cod ...

javascriptcssangularjsng-class

Tips for creating zoomed-in background images on small screens

I am currently implementing this code for a website project .homepage{ background-image: url(/wp-content/themes/ep/img/_.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background ...

twitter-bootstrapcss

Scroll horizontally in a div with a minimum width while it is contained within a column using Bootstrap

I am seeking to create a bootstrap v4 grid with 3 columns, where certain content within the columns require a minimum width. This necessitates a horizontal scroll (overflow-x), but I am encountering some overlap where the scrollbar and content extend beyon ...

htmlcssbootstrap-4

Calculate the number of parent nodes and their respective child nodes

I am curious about how I can determine the number of children nested within parent-child relationships. For example: const parent = document.querySelectorAll('.parent'); parent.forEach(el => { const ul = el.querySelector('.child3-chi ...

javascripthtml

Looking to update the background color of the items in a sliding door menu using CSS

I'm having trouble changing the background color of my list items in a sliding door menu using CSS. I've successfully changed the left border to green and the text to white, but the background color remains unchanged. Below is the code I'm u ...

css

After refreshing the page, the ngRoute white page is displayed

I've encountered an issue with my Angular website. I built it using ngRoute, but when I click on a link, a white page appears. Only after refreshing the page does the content actually show up. Even in the browser's DevTools, you can see the html ...

javascripthtmlangularjsroutesngroute

Retrieving list item contents using PHP DOM scraping

Is it possible to use PHP DOM screen scraping to extract the content from an HTML tag named <li style="margin-top:10px"> that appears on one of my web pages? I am looking to retrieve all the data within the <li> tag and present it as HTML co ...

phphtmldom

A JavaScript String Utilizing an HTML Document

When developing applications for my website using JQuery, I encountered an issue with pulling an html document into a string. I want the application button to open a window with the html document inside. I am attempting to modify this string variable with ...

javascripthtmljquerydominnerhtml

How can you enable a button to be clicked from within a drawer?

Hey there, I've got a div that toggles hide/show like a drawer when clicked. When the drawer is in show state, it contains a button. How can I make the button clickable without toggling the drawer? Any ideas on this?! `zIndex` doesn't seem to be ...

javascriptcssreactjs

Placing a collection of <a> anchor tags inside a div and making them float

I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <n ...

htmlcss

Tips for creating a mandatory textarea input field

It's pretty straightforward - I have a textarea that is set to required, but it only alerts the user if you actually click inside the text area. If you try to submit without clicking inside, it won't prompt the alert. Take a look at this Fiddle ...

javascriptjqueryhtml

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

javascripthtmlcsstwitter-bootstrap

What is the process for linking functionality to buttons in Embedded Elixir?

When it comes to rendering templates, I follow this method: <%= for country <- @countries do %> <div> <div>A compilation of countries you have visited</div> <a href="/countries/<%= String.downcase(country) %& ...

htmlelixirphoenix-framework

Dynamically setting CSS values with jQuery to center an image within a div

I'm trying to center an image in a div according to the width of the image after I scale it to have a height of 250px. For example, if I had an image with dimensions 625x450 and, in my CSS file, set the height of the image to be 250px, then the width ...

jqueryhtmlcss

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a ch ...

javascriptcss

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

javascripthtmlspotify

What could be causing the error message 'Alias configuration for Field browser is not valid' to appear when attempting to compile SCSS using Webpack through the terminal?

Recently, I decided to try using webpack to compile my scss files for the first time. However, when attempting to start it, I encountered an error message stating: Field 'browser' doesn't contain a valid alias configuration In addition, ano ...

htmlcssnpmwebpacksass

The class of each page on the website keeps changing, making it a challenge for me to scrape the page descriptions

import requests from bs4 import BeautifulSoup import numpy as np import re import json title = [] pages = np.arange(1,13) for page in pages: url = 'https://www.jobs.ch/en/vacancies/?page='+str(page)+'&term=python%20web' p ...

pythonhtmlclassweb-scrapingbeautifulsoup