excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appears alongside the entire body section and I cannot figure out what is causing it. I have provided two screenshots for reference, as well as links to the websites where you can see the issue in action: - See screenshot 1 here - View screenshot 2 here. If you require specific parts of the code to review, just let me know and I will gladly provide them. Visit the websites below to see the issue firsthand: - www.shariffoundation.ir/prototypetest - www.petrobavar.ir

javascripthtmlcsstwitter-bootstrapmaterialize

Answer №1

Upon reviewing www.shariffoundation.ir/prototypetest, it appears that the issue stems from the animations within your footer element. To resolve this, consider implementing {overflow:hidden} for the footer area.

Regarding the second link, I recommend utilizing overflow:hidden for the "responsibility" id like so: #responsibility{overflow:hidden}

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

Error: Unable to execute function abc, it is not defined as a function in this context

Having trouble with a fronted or JavaScript issue where it can't find the defined function in the file. I'm working on integrating Apple Pay and need to call the back-end API based on a specific event. Here is my code. ACC.payDirect = { _autoload ...

javascriptjquerytypescript

Transforming FormData string key names into a Json Object that is easily accessible

Recently, I encountered an issue where my frontend (JS) was sending a request to my backend (Node Typescript) using FormData, which included images. Here is an example of how the data was being sent: https://i.stack.imgur.com/5uARo.png Upon logging the r ...

javascriptnode.jstypescript

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...

javascriptjqueryhtmlajax

center text above images in flexbox when page is resized

When resizing the page, I'm facing an issue where the links overlap with the images in a flexbox layout. It seems like the padding and margin between the images and links are not working due to them not being "related" or connected. I believe I need t ...

javascripthtmlcss

Tips for converting the Instagram cURL post request to a JavaScript request

I am attempting to convert the code I received from Instagram into a token. The code provided in the Instagram DOCS uses a curl request, but I would like to implement it using JavaScript instead. Here is how the original code looks: curl -X POST &bsol ...

javascriptajaxapicurlinstagram-api

Deleting tasks from the to-do list using Node.js and Express with EJS

Looking to implement functionality where each list item can be removed from a Node.js array by clicking on an HTML button using EJS and Express: I am considering placing an HTML button next to each list element so that the selected element can be removed ...

javascripthtmlnode.jsexpressejs

``There is an issue with getServerSideProps when wrapping it in a

When attempting to implement an auth handler function around getServersideProps, I encountered the following error message: TypeError: getServerSideProps is not a function The wrapper code in question is as follows: export async function protect(gssp) { ...

javascriptnext.js

Ways to navigate to a different page using HTML response from an AJAX request

After receiving an HTML document as a response from an AJAX call, I need to create a redirection page using this HTML response. Can anyone provide guidance on how to achieve this? ...

javascripthtmlajaxhttp-redirect

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

javascriptjquerycssfooter

Refresh collection of texts

I am attempting to update an item within a subarray of a document. The type of the subarray is an array of strings: Dictionary.findOne({ name: req.query.name }, function(err1, data){ if(err1){ logger.error(err1); res.send({ ...

javascriptnode.jsmongodbmongoose

Unlocking request header field access-control-allow-origin on VueJS

When attempting to send a POST request to the Slack API using raw JSON, I encountered the following error: Access to XMLHttpRequest at '' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field acces ...

javascripthttpvue.jsaxiosvue-cli-3

What is the optimal approach for displaying numerous button components with varying values?

I've been developing a calculator in React and I decided to render all the buttons using the Button Panel component with what some might call a "brute force" method. return ( <> <div> <Button value="A/C" cl ...

javascriptreactjs

Implementing a dynamic function with jQuery Tokenize's change event

I'm currently facing an issue with triggering the on change event on the select box from jQuery Tokenize. Below is the code snippet I am working with: <select id="tokenize" multiple="multiple" class="tokenize-sample"> <option value="1"&g ...

javascriptjquery

Finding the perfect spot to CAPTURE an ERROR triggered during an EVAL operation

This snippet of code allows you to run JavaScript code while using a try/catch block to catch any errors that may occur. try { var result = eval(script); } catch (e) { // handle the error appropriately } However, if the variab ...

javascriptajaxeval

Unveiling the Truth about Svelte Transitions

Recently, I attempted to incorporate the guidance provided in this repl () for implementing flying and fading effects on divs. However, it seems that I may have a slight misunderstanding regarding the concept... To tackle this, I designed a component rese ...

javascriptsvelte

Glitch found in Safari involving innerText of elements

Hey everyone, I posted this question not too long ago but now I have some images to share regarding the issue with Safari. When checking the console in Safari, the following text is displayed: <div id="rot3posDisp" class="rotDisp">C</div> Ho ...

javascripthtmlsafari

"Transforming JSON data into structured key-value pairs using JavaScript

Develop a function named "json_filter" that accepts a JSON-formatted string as input. The accepted format is an array of objects, where each object contains keys for "mass," "density," "temperature," and "velocity," each mapped to a floating-point number. ...

javascriptjson

When using jQuery and AJAX together, it seems that the POST method is returning

Currently experimenting with Cloud9. The current project involves creating an image gallery. On the initial page: There are a few pictures representing various "categories". Clicking on one of these will take you to the next page showcasing albums fro ...

javascriptphpjqueryhtmlajax