My webpage layout doesn't quite accommodate my content, so I need to adjust it to be more zoom

Why does the page container load bigger than the html/body container in mobile mode, as shown in the photo?

https://i.sstatic.net/fD1N4.png

Here is my CSS:

html {
  margin-top: 48px;
  width: 100%;
}

body {
  margin: 0;
  width: 100%;
  background: var(--bgGray);
  font-family: Ubuntu, Ubuntu Mno, Verdana, sans-serif;
  color: var(--offWhite);
}


.layout-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/*div container*/
.about-grid {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 4.5fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0.5rem;
  grid-template-areas: "txt-about sidebar-cont";
  padding-top: 30px;
}

@media screen and (max-width: 850px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "txt-about"
      "sidebar-cont";
  }
}

This issue only occurs on 2 out of 4 pages, with the one on the screen containing an MDX component. Any solutions for resolving this problem?

javascripthtmlcssreactjs

Answer №1

When working on the about-grid class, it's important to consider using two different styles based on the screen size specified in the media query 

@media screen and (max-width: 850px)
. Start by applying a consistent style and reviewing the outcome before fine-tuning the properties for each mode once the 
@media screen and (max-width: 850px)
is active again.

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

Alert: Route.get() is requesting a callback function, but is receiving an [object Undefined] while attempting multiple exports

I'm attempting to export the middleware function so that it can be called by other classes. I tried searching on Google, but couldn't find a solution that worked for my situation. Below is the code snippet: auth.js isLoggedIn = (req, res, nex ...

javascriptnode.jsexpressexportmiddleware

Using two variables for iteration in Vue.js v-for loop

Can you create a v-for loop with two variables? I attempted the following, but it did not function as expected <ul id="example-1"> <li v-for="apple in apples" v-for="banana in bananas"> {{ apple .message }} {{ banana .message }} & ...

javascriptvue.js

Tips for managing the sequence of chosen items

Currently, I am utilizing the react-dropdown-tree-select component in my project. I have a question regarding changing the order of selected items. The current default behavior is for the selected item order to match the data list order. However, I woul ...

javascriptnode.jsreactjsreact-dropdown-tree-select

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

htmlcssmarginvertical-alignmentspacing

Unable to find custom components when using react-router

My goal is to improve the organization of my Routes in React and separate concerns. I am currently utilizing react-router-dom version 5. Within my Application Routes component, I have structured it with 3 children components: AuthenticatedRoutes PublicRo ...

javascriptreactjstypescriptreact-routerreact-router-dom

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

css

What is the best way to divide a pair of words onto two lines individually?

Looking for a way to break the word 'Mon 24' into separate lines like this: Mon 24 I attempted using word-break: break-all without success. Check out my code example here: https://codepen.io/bbk_khadka/pen/zbVLEp ...

htmlcss

Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...

htmlcss

Using React Quill JS and looking to log to the console when a change handler is triggered?

As I dive into the world of web development, I am currently working on crafting a blog dashboard. For the text editor, I've opted to use React Quill. While following the documentation, I came across a tutorial that includes an 'on change' ha ...

javascriptreactjsreact-quill

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

javascriptjquerycssruby-on-railssprockets

Encountering an issue when trying to dynamically import React Material UI Icons

Hey there, I'm currently working on dynamically loading icons from MUI using the following code snippet: import React from "react"; import * as MuiIcons from "@mui/icons-material"; console.log("MuiIcons: ", MuiIcons); co ...

reactjsmaterial-uivite

What is the best way to populate an array with unique values while applying a condition based on the objects' properties?

Looking to create a unique exam experience for each student? I have an array of question objects and the goal is to select random and distinct questions from this array until the total sum of scores equals the specified exam score. This means that every s ...

javascriptnode.jsarraysobject

Utilizing external clicks with Lit-Elements in your project

Currently, I am working on developing a custom dropdown web component using LitElements. In the process of implementing a feature that closes the dropdown when clicking outside of it, I have encountered some unexpected behavior that is hindering my progres ...

javascripttypescriptlit-elementlit-html

Sending a prop to a handler causes issues with navigation paths

I'm facing an issue with my handler and button component setup. Here's my handler: const addToCartHandler = (id) => { navigate(`/cart/${brand}/${id}?qty=${qty}`)}; And here's the button component using the handler: <Button onClick={a ...

javascriptreactjs

What could be causing my JavaScript/jQuery code to malfunction when dealing with checkboxes?

My code is supposed to select and disable checkboxes based on which radio button is clicked. For example, when Zero is selected, all checkboxes should be highlighted and disabled, except for the zeroth checkbox. However, this behavior does not consistent ...

javascriptjqueryhtmlcheckbox

React: Issue with array rendering order after initial render

After the initial rendering of my array in the correct order, any subsequent changes to it result in the same rendered order. Let's consider this scenario: initializeArray() { this.state = { test_array: [1,2,3,4] } let self = t ...

javascriptreactjsecmascript-6

Creating an HTML page with R Markdown: Placing an image in the upper right corner and adjusting the position of the title

Looking to add a company logo image to the top right corner of my R markdown report, and then shift the title down by 3 or 4 cm for a letterhead-like appearance. Does anyone have suggestions on how I can achieve this in my .Rmd file? Appreciate any assist ...

htmlcssrr-markdown

The destination where data is transmitted via POST to a PHP file using the HTTPRequestObject.send method

Can anyone help me figure out where the HTTPRequestObject stores strings that I have sent using the "POST" method to a PHP file? I have checked both the $_POST and $_REQUEST arrays but cannot find them. This is how I am sending the data from JavaScript: ...

phpjavascriptajax

Is the this.props.onChange method called within the render function?

I'm having trouble grasping the concept of the assigned onChange property in this TextField component I found in the material-ui library: <TextField style = {{"padding":"10px","width":"100%"}} type = {'number'} valu ...

javascriptreactjsmaterial-ui

Jquery submenu accordion toggles open and closed with each click

My website has a hamburger menu with an accordion-style submenu implemented using jQuery for devices 1084px and smaller. For larger devices, the menu utilizes a hover-style submenu on desktop. However, I encountered issues when trying to use both the hove ...

javascripthtmljquerycss