The HTML element/div is adjusting its size as the screen width decreases

Currently, I am facing an issue with my responsive design that seems to break when the screen size is narrower than approximately 380px. The problem appears to be the entire HTML page element narrowing and causing the child elements to shift, resulting in the overall page being off-center (view image). Despite experimenting with various breakpoints to address this issue, I have not been able to maintain the HTML element's width at 100% on very small screens.

I suspect that I may be overlooking a key aspect of the problem, so any assistance in recognizing this would be greatly appreciated!

To review my code, please visit: https://github.com/thomaswalsh92/wordsearch

htmlcssflexboxresponsive-design

Answer №1

Within your .dashboard class, you have set the gap to 1rem. The gap property acts as shorthand for column-gap and row-gap. Due to setting the column-gap to 1rem, your page appeared off-center. It is advisable to adjust the fixed width within your .x class for smaller screens as well. Once these changes are made, your layout should remain intact without any issues.

  1. Link to Codesandbox
  2. MDN - Gap property
.dashboard {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr) [21];
  grid-template-columns: repeat(21, 1fr);
  -ms-grid-rows: (minmax(32px, auto)) [3];
  grid-template-rows: repeat(3, minmax(32px, auto));
  gap: 1rem 0;
}

.word-board-section .word-board-container .x {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: auto;
  margin: 0 auto;
}

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

Issue encountered with CSS-in-JS in a TypeScript, Webpack, React project: No matching overload found

My project involves Webpack, Typescript, and React Hooks with CSS-in-js for styling a div. I encountered an error while hovering over the style prop in the Menu component. I'm unsure about where to bind the CSSProperties. (JSX attribute) React.HTMLAtt ...

cssreactjstypescriptwebpack

What could be the reason for my Bootstrap collapse navigation bar not functioning properly?

<!DOCTYPE html> <html lang="en"> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> ...

htmlcsstwitter-bootstrap

Tips for concealing table columns on a mobile screen

I could really use some assistance with a challenging situation. I am currently working on a WordPress website project and using the "Table Maker" plugin to display detailed information in a table format. The desktop view of the table includes 7 columns, ...

csswordpress

What is the purpose of utilizing jQuery for retrieving CSS resources?

Upon reviewing the Chrome Dev Tools screenshot, I am puzzled by the fact that my CSS assets are being fetched by jQuery. The CSS sheet is included in the normal way, using a <link rel="stylesheet"> tag in the <head> section, while jQu ...

jquerycssgoogle-chrome-devtools

Issue with vertical alignment within nested divs

I have been attempting to center a search bar inside a top banner vertically. My understanding was that the following code could achieve this: #banner { height: 35px; width: 100%; } #searchbar { height: 15px; position: relative; top: 50%; ...

cssvertical-alignmenthtml

Discover the steps to modify the input field type with just a keypress in angularjs

I need help changing an input field type from text to password. Currently, I am able to change the input field type from text to password when clicking on it. However, I also want the type to change from text to password when tab is pressed. Any assistan ...

cssangularjs

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Check out the code snippet below: template.html : <div id="nav"> Welcome to Space </div> layout.html : <div id="content"> </div> $('#content').load("template.html #nav"); ale ...

javascriptjqueryhtmldom

Positioning a div beside another div without containing it

Check out the snippet below. I am looking to vertically center an element, 'modal', over another div, 'element', regardless of its position or margins. However, I cannot place the 'modal' div inside the 'element' di ...

javascripthtmlcss

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

javascripthtmlcsscss-transitions

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

javascriptcsstypescriptreact-nativenative-base

display several pop-up notifications in a contact form

Trying to create a contact form that displays an alert box upon pressing the submit button; for example, one alert for "form could not be submitted" and another for "form was successfully submitted." Can this be achieved using if/else statements? I'v ...

javascriptphphtmlformsalert

How to add shadows to an image's border radius using React Native View manipulation?

Encountering styling challenges in React Native with shadows. I am aiming to apply a shadow only on the image, which has rounded edges rather than being square due to the border-radius applied. However, when I try to add a shadow to the parent View elemen ...

cssreactjsreact-native

Interested in giving the <option></option> tag a go with some looping?

Recently, I encountered a unique case that puzzled me. The issue at hand is my attempt to loop a certain tag 3 times. Although the looping process functions properly, only one loop gets saved in the database. Below are some screenshots for reference: Scr ...

phphtmlsqlloops

Ways to display a series of images side by side to fill the entire width consistently

I need a solution to display multiple images in a box, all set to the same height and width of 154px x 125px. While this can be achieved, the issue arises when there isn't enough space for the final image, leaving blank areas. Is there a way to make t ...

htmlcssresponsive-design

Why Aren't Static Positioned Divs Aligning at the Parent's Top?

I am facing an issue where I have 3 divs with content inside them, and the two smaller ones are aligning at the bottom of the larger div. Despite no presence of margin or padding, this alignment mystery has left me puzzled. body { width: 100% } .cont ...

htmlcss

The Tailwind CSS Chrome extension is causing disruptions on the websites I view

Currently, I am in the process of creating a chrome extension using various tools like React, Typescript, TailwindCSS, and a custom Webpack configuration. To enhance user experience, I have modified the default action in manifest.json so that clicking on t ...

cssreactjstypescript

Designing unique icons through image manipulation in CSS

I am currently experimenting with creating an icon that functions similar to font-awesome. When I apply a specific class, it should display an image based on the font size. Surprisingly, I got it to work in Chrome but for some reason, the same code doesn&a ...

css

Can a plugin be executed as a test?

I am currently using HTMLhint, however, I would like to have it run as a test rather than just through the command line plugin. Is there a way to achieve this and if so, how can I do it? I have searched online but haven't been able to find a solution ...

javascripthtmlunit-testingtesting

javascript: create an image below the surface and store it

Working on a project with Censiumjs, a JavaScript map library, I am looking to create a heatmap from JSON data and display it on the map. My current approach involves utilizing a heatmap JavaScript plugin to draw the heatmap on a hidden canvas, saving it ...

javascriptjqueryhtmlcanvascesiumjs

Creating a dynamic multi-level menu within a hamburger menu

Tackling the challenge of creating a hamburger multi-level menu for a web page using CSS has proven to be quite tricky. The main issue I'm encountering is successfully incorporating a sub-menu to make it truly multi-level. Here's the progress I&a ...

jqueryhtmlcss