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

Converting images to greyscale or transparency within a ReactJS component

I am exploring ways to transform an image into grayscale or make it transparent before using it as a background in ReactJS. Is there a way to achieve this in ReactJS? My current code snippet is shown below: <GridListTile> <img style={{ -we ...

javascriptcssreactjs

The canvas grid is malfunctioning and failing to display correctly

My current code allows me to draw a grid on a canvas with multiple lines, but I'm encountering an issue when trying to render 25 or more lines - some of them don't appear on the canvas. This problem becomes more noticeable when there are 40 or mo ...

javascripthtmlcanvashtml5-canvas

A guide to updating a particular row and sending parameters with jQuery and AJAX

I am utilizing a JSON response to dynamically display table content. Here is the code I am using to display row values: var rows = ''; for(var i=0; i<response.response.length; i++) { rows += '<tr><td class="country">&ap ...

javascripthtmlajaxjson

Displaying elements upon checkbox selection in React

Hello, I'm new to React and I am facing an issue with checkbox click handling in React. My goal is to display a div when a checkbox is checked and hide the div when the checkbox is unchecked. The current implementation only shows the div when the che ...

htmlcssreactjscheckbox

Tips for keeping a consistently viewable and editable iteration of your HTML form

How can I efficiently maintain both viewable and editable versions of the same HTML form? I am working on an application that has numerous custom data-entry screens with a high number of fields, and managing separate layouts for viewable and editable form ...

phphtml

positioning of multiple buttons in a customized header for mui-datatables

I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being e ...

cssreactjsmaterial-uimui-datatable

jquery accordion failing to display content

Upon navigating to my website and accessing the webpage featuring an accordion, the accordion successfully appears and hides after 1500ms as intended. However, when attempting to reveal the text by clicking on the headings, nothing happens. The heading sim ...

javascriptjqueryhtmlcodeigniter

Is there a way to insert a label directly following a dropdown menu within the same table cell?

My goal is to include drop-down lists in a web page, so I decided to create a table structure using JavaScript. Firstly, I used the document.createElement() method to generate a table, table body, rows, and cells. Then, I proceeded to create select element ...

javascripthtmldom

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

javascriptjsonhtmldateobject

Choose the initial offspring from a shared category and assign a specific class identifier

I am trying to figure out how to apply the "active" class to the first tab-pane within each tab-content section in my HTML code. Here is an example of what I'm working with: <div class="tab-content"> <div class='tab-pane'>< ...

javascriptjqueryhtmldom

Is there a way to extract the "validade" value from the array and retrieve it exclusively?

The following array contains data: {"status":true,"data":[{"id":1,"pessoa_id":75505,"created_at":"2022-02- 01T17:42:46.000000Z","holder":"LEONARDO LIMA","validade&quo ...

javascripthtmlangular

Adding a custom class to a select2 dropdown: How can it be done?

I have customized select2 using CSS with its general classes and IDs. Currently, I am attempting to customize a specific class that will be assigned to select2 and then applied in the CSS. The problem lies not within the select itself, but within its dro ...

javascriptjquerycssjquery-select2

Why is it that text doesn't function properly next to certain images?

I have been using the code below to place text next to an image: <div style="display:inline-block;vertical-align:bottom"> <p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p> </div> ...

htmlcssimagepositioning

Having issues making div elements with javascript

I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses ...

javascriptjqueryhtmlcss

An issue occurred: TypeError - Unable to access the 'subscribe' property of an undefined object during a POST HTTP request in Angular [8]

I'm currently attempting to send data to a REST API using Postman. I am encountering an issue where I receive the error "Cannot read property 'subscribe' of undefined" when making a POST HTTP call, as shown in the console log: https://i.sta ...

javascripthtmlangularangular8

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

Arrange various Div elements of varying sizes in a predetermined sequence

I need to ensure that a large div maintains the same height as 20 other divs within the same container, when the screen size is between 1024px and 1920px in width. The challenge lies in arranging all these items in a floated layout grid that looks clean a ...

jqueryhtmlcssflexboxcss-grid

Achieving consistent hover effects in both Firefox and Chrome with CSS

Currently, I am faced with a dilemma regarding some CSS hover effects and table formatting. Despite successfully implementing most aspects of the design, there is an issue with how different browsers interpret padding within elements during color changes o ...

cssgoogle-chromefirefox

The art of applying styles through styled components

I am attempting to customize the styling of my component with the following code: export const StyledCascader = styled(Cascader)` background-color: gray; ul.ant-cascader-menu { background: red !important; } `; Despite using styled components ...

cssreactjs

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss