This webpage (page URL -) displays well without any white space between two images when viewed on a laptop. However, when accessed on a mobile device, it appears to be taking up too much space as shown in the image below.
Image of webpage on laptop- laptop loading page
Image of webpage on mobile -Mobile loading page
Here is the link to my source code - https://github.com/sunil7117/demo.git
Note: Inside the "mainComponent" folder, there are two components and both are important.
After reviewing your code and classes, I noticed that you have set a static height of 90vh for the main component body while the navbar has default material ui height size. This setup results in the navbar's height being responsive while the body remains static. I would recommend either setting a static height for the navbar or making the body's height responsive. If you need further clarification, feel free to ask for more detailed assistance. One solution could be as follows:
<AppBar position="static" sx={{ height: '10vh' }} >
...
</AppBar>
If you have a footer, you can allocate an extra 10vh between the footer and navbar. Alternatively, a more complex solution involves ensuring all components within the body fill the page correctly. For instance, if you only have a simple image, you can adjust its width to fit and allow the image size to adjust accordingly.
After creating tests for my website using selenium and javascript, I am now looking to implement them in a production environment. Currently, I have been running these tests locally with the Chrome driver. In the start section of my package.json, I execu ...
I have developed a Chat application where I encountered an issue. The problem arises when I attempt to rerender the message item (partial Component) after a moderator clicks on "Delete". To tackle this, I initiate a request to the server in order to make t ...
I am trying to achieve a "flashing" effect by adding the .shown class to my #overlay, causing the opacity to fade in for 2 seconds and then immediately reverse, fading out for another 2 seconds. After experimenting with removing the class, I found that it ...
I didn't encounter any issues with my Django and React URL routing during development, but as I attempted to transition to production, a multitude of problems arose. Admittedly, regex is not my strong suit. It appears as though a feline pranced acros ...
I'm working with the payload structure of my API and I want to format the data in a way that allows for dynamic display on the frontend without hardcoding column names. Currently, I am using DRF, axios, and react-redux, but I feel like I may need to d ...
In my header.tsx, the code looked like this. import Image from 'next/image'; import { HeaderMenu } from './menu/headerMenu'; import { HamburgerButtons, HamburgerMenu } from './menu/hamburgerMenu'; import { useState } from &apo ...
I am looking for a way to update the table content without refreshing the entire page. I am using HTML, CSS, and JavaScript to display the current data from my sqlite3 database. Any tips on how to achieve this would be appreciated. ...
How can I create a continuous @keyframe animation that stays active for the duration of the user's visit to my webpage? I've implemented several color animations on my website, each with a specific duration. Is there a way to make these color ch ...
My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...
After finishing a design in Sketch, I have 3 unique layouts with header images displayed below: To ensure the height is consistent and to crop the image appropriately on different devices, I export the following images from Sketch: dog-header-mobile-1x.p ...
When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...
I'm looking to create a picture that changes when hovered over, and I've already achieved this using CSS by adjusting the z-index. However, I don't want users to be able to click on the image. To prevent this, I have removed the href from th ...
axios.delete(http://localhost:3001/api/delete/${movie}/${review}) The issue is that I am trying to pass 2 pieces of information, but it is not working. On the backend, my code looks like this: app.delete("/api/delete/:movie/:review", (req, res) => { co ...
App.tsx import React from 'react'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import './app.css'; import Login from './auth/pages/login'; import DashBoard from &ap ...
As a newcomer to Firebase, I have a question regarding its theoretical implications. I currently have a Firebase database with a user collection containing fields such as email, password, and isAdmin property. Users with an isAdmin value of 1 are conside ...
I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE. Check out the code here h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:afte ...
Is there a way to downgrade a project created using "npx create-react-app . --template typescript"? I've tried manually changing dependencies and then running "npm install" as suggested online, but I always encounter errors. How can I adjust the depen ...
I am currently using Html5, fabric.js, and JavaScript to upload multiple images to a canvas. However, there are instances where the uploaded image size exceeds that of the canvas. I am looking for a way to ensure that the image is set to a fixed size. v ...
I have already found a solution to this question, but I am interested in exploring better alternatives. My goal is to utilize flexbox to create rows of items with equal spacing and dividing lines between them. The examples provided in the code snippet achi ...
I need help with a table that has vertical headers. I want to remove the extra space within the table header and data cells. Here is the code for my table: <table> <tr> <th class="field">Item ID Number:</th> < ...