Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using 

<meta name="viewport" content="width=device-width, initial-scale=1">
as a solution but it didn't work. Removing unnecessary height/width elements from the article/nav bar only made things worse.

The overflow issue on mobile:

https://i.sstatic.net/te0nR.jpg

You can view the site at https://mspace.w3spaces.com. Here's the code for the index page (I will eventually move the CSS styles to a separate file):

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}  
.bg-image {
opacity: 0.5;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* More CSS code goes here */

footer {
  background-color: #010203;
  padding: 25px;
  text-align: center;
  color: #19aef6;
  overflow: hidden;
}

/* Additional CSS code */

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

If anyone could provide some guidance specific to my site, I would greatly appreciate it. Thank you!

htmlcssoverflow

Answer №1

The article tag was left unclosed, causing overflow when fixed height or width are set. It's recommended to avoid setting a fixed height when it can change, or use fit-content instead.

I made some adjustments to your code and addressed the main issue. There are some remaining fixes needed that I've left for you to handle. If you encounter any difficulties, feel free to leave a comment below.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* add background to body */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  background: #010203;

}  
.bg-image {
opacity: 0.5;
}

...
// Remaining code is unchanged
...
</article> <!-- added closing article tag-->
    </section>

<footer>
  <p>Thanks for reading!</p>
</footer>

</body>
</html>

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

Switch out external CSS stylesheets automatically using toggle scripting

Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...

javascriptjqueryhtml

How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

javascripthtmlcssangularjs

Guide to creating a distortion-free layout with Bootstrap 4

I am in need of creating a design layout using Bootstrap 4 with the following specifications: https://i.sstatic.net/JeUHh.png Here is my code : <div class="row"> <div class="col-md-7"> A </div> <div class="col-md-5"> <div ...

htmlresponsive-designbootstrap-4

I am encountering issues with the responsiveness of my layout as it is

My goal is to create a responsive layout utilizing code and examples from this website: www.responsivegridsystem.com To achieve this, I have nested a few containers to ensure a content area of 960px width centered within a 1000px container. My plan is th ...

htmlcssresponsive-design

Design a custom icon for uploading multiple files

Looking to create a bootstrap-4 icon for multi-file upload. I've got the code reference for single file upload, but now I need to know how to create an icon for multi file upload. <!DOCTYPE html> <html> <head> & ...

htmlbootstrap-4multifile-uploader

How to retrieve an array value within a function in AngularJS

<select class="form-control" id="column" ng-model="selectedcolumn" ng-options="column for column in columns"></select> <input type="text" ng-model="test[selectedcolumn]" ng-change="search()" /> Is there a way to retrieve the value o ...

javascriptangularjshtml

How to display a PDF in a web browser using PHP

I have the following code block: header('Content-type: application/pdf'); header('Content-Disposition: inline; filename="the.pdf"'); header('Content-Length: ' . filesize($file)); @readfile($file); It is working perfectly fin ...

phphtmlpdf

Error: jwt_decode function has not been declared

I'm currently working on a project and I've hit a roadblock while trying to fetch profile information for the logged-in account using a token. Despite using the JWT-decoding library, I keep encountering the issue where jwt_decode is not defined. ...

javascripthtml

retrieve the data-initial-value's value through JavaScript

Hello, I am currently attempting to retrieve the text from this input field but all I'm getting is an empty value. <input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete= ...

javascripthtml

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Grid element not displaying properly as intended

I'm having trouble centering the content of item in the middle column, it just won't budge. .home-grid-container { display: grid; grid-template-columns: auto; grid-template-rows: 0.10fr 0.98fr auto; height: 100vh; } .home-header { g ...

htmlcsscss-grid

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

csssencha-touch-2.3

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

javascripthtmlcss

What is the best way to fill the dropdown options in every row of a data table?

This HTML snippet displays a data table with test data and corresponding dropdown options. <tr> <th> Test Data </th> <th> Test Data ...

javascripthtmlangulartypescriptprimeng

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss

The tab navigation feature is experiencing issues in Internet Explorer versions 7 and 8

I have successfully implemented a tab menu that functions well in Chrome and IE 9,10. However, it does not seem to work in IE 7 or 8. I am at a loss regarding what changes need to be made to my code. Could anyone provide assistance? Link to Code Example ...

jquerycsscross-browser

What is the process for sending an email to a designated recipient through an HTML form and then storing it as a record in an HTML table?

<!-- Placeorder part --> <div data-ng-show = "isPlaceOrder"> <div class = "col-lg-10" style = "margin-top:80px"> <div class="panel panel-primary"> <div class = "panel-heading">Drug Request Mail Sender</div&g ...

htmlangularjsnode.jsexpress

Vue.js component still not transitioning out despite using mode="out-in"

As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit ...

cssvue.jsvuejs3vue-routervue-transitions

How to manipulate wrapping behavior in flexbox

My flex container holds three divs, arranged in two rows: First row: One div with a fixed width Another div that should stretch to fill the remaining space Second row: Just one item However, the first div stretches to 100% width and pushes the seco ...

htmlcssflexbox

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

javascriptjqueryhtml