The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working as expected.

The cells on the board are generated dynamically using an ngFor loop. The black cells have the class "b", white cells have the class "w", and filler cells outside the board (used for spacing) are assigned the class "e". In my attempt to resize the board using media queries, I am adjusting the padding and background-size properties of these div elements.

Although the media query is successfully moving my menu div when resizing the browser window, it does not seem to be affecting the background-image and padding properties of the "e", "b", and "w" divs accordingly.

Even when the board can render at the new dimensions without relying on the media queries, there seems to be an issue with the responsiveness of the styles applied through them.

Below is the section of CSS code containing the media queries:

.b{
  float: left;
  border-width: 2px;
  border-style: solid;
  border-color: #a5a5a5;
  background-color:     #686868 ;
  background-size: 23.2px 23.2px;
padding: 10px;
}
.w{
  float: left;
  border-width: 2px;
  border-style: solid;
  border-color: #a5a5a5;
background-color: #e5e5e5;
  background-size: 23.2px 23.2px;
padding: 10px;
}
.board{
width: 100%;
display: flex;
padding: 10px;
}
.menu {
    width: 100%;
    order: 1;
  }
  .rewind{
  padding: 10px;
  }
@media (min-width: 1100px) {
  .menu {
    order: 1;
    width: 25%;
  }
  .board {
    order: 0;
    width: 75%;
  }
  .e{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  .b{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  .w{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
}

@media (min-width: 420px) {

  .e{
  background-size: 33.2px 33.2px;
padding: 15px;
  }
  .b{
  background-size: 33.2px 33.2px;
padding: 15px;
  }
  .w{
  background-size: 33.2px 33.2px;
padding: 15px;
  }

}

Platform: The issue has been observed across all browsers, and the project utilizes Angular version 1.5.8 and Bootstrap version 3.3.7.

Answer №1

Your website's CSS file has a typo that needs attention (not in the provided code snippet).

The CSS classes should have periods before the letters, not after them.

After making this adjustment, the larger version of the board displays correctly. Has this fixed the issue?

@media (min-width: 420px) {

  e.{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  b.{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
  w.{
  background-size: 43.2px 43.2px;
padding: 20px;
  }
}

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

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

Is it possible to automatically move text to the next line once it reaches a specific character limit using HTML/CSS/PHP?

Is there a way to handle text when it reaches the ceiling or exceeds a certain number of characters so that it goes to the next line instead of showing a scrollbar? I have a div element where I display text retrieved from a MySQL database, and sometimes th ...

What is the functionality of the CSS switch button?

I'm curious about how the cool turn on/off switch button actually works. Take a look at for reference. I'm interested in implementing a prevention check to confirm whether the user truly wants to switch the button. Here's a snippet of the ...

Utilizing ng-options to dynamically populate a select element with data received from a

Currently, I am receiving a promise in the following manner. GetAgentsPromise.then(function(response) { GetAgentsPromise.then(function(response) { $scope.ClientAgents.id = response.data.d.AgentIDs; $scope ...

What is the best way to adjust the width of a table td element using CSS in Spiceworks?

I'm attempting to modify a CSS code snippet for Spiceworks. Here is the specific line that I need to adjust: <td class="body-id cell-id" style="width: 12%; "></td> The following code: SPICEWORKS.utils.addStyle('body{background-col ...

Is there a way to update an image dynamically within CSS using the :before pseudo-element?

I am attempting to dynamically change the background image, but I am having trouble accessing the wrapper before "wrapper:before{}" from jQuery $('.wrapper:before) .wrapper:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; displa ...

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?

In my journey with ionic version 1 (just starting out with ionic & angularjs), I encountered an issue while trying to close the in app browser upon reaching a specific URL. The problem arises from the fact that the event triggered on "loadstart" is o ...

What is the best technique for creating a preloader that can seamlessly fill the background of a vector image?

I am looking for guidance on creating a CSS3 preloader using a vector image. My goal is to have the logo start off transparent with only the border visible, and as the loading occurs, fill in from bottom to top with the background color. Thank you to ever ...

Observing modifications in either $pristine or $touched states within the transcluded input

I'm currently in the process of creating a directive for an input element that reacts to changes in the model being modified or interacted with. It seems that the mandatory ngModel reflects modifications in the value and view of the input model, but n ...

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...

Is this the correct method for constructing a class in CSS?

What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...

Is the value of the object in the array already present in another array of objects?

Plunker - http://plnkr.co/edit/jXdwOQR2YLnIWv8j02Yp In my angular project, I am working on a view that displays a list of users in the main container (array-A) and a sidebar with selected users (array-B). The first array (A) contains all users: [{ $$has ...

Unlock the potential of HTML5 Datalist: A comprehensive guide on integrating it with

The latest version of HTML, HTML5, has introduced a new tag called datalist. This tag, when connected to <input list="datalistID">, allows for autocomplete functionality on web forms. Now the question arises - what is the most efficient approach to ...

Exploring the power of Express.js by utilizing local variables and rendering dynamic views

I am in the final stages of completing an application using node.js and express, even though I am still relatively new to them. Here's my situation: In my app.js file, I have declared a variable app.locals.webLang and set its initial value to "EN". T ...

Tips for creating a login page with AngularJS

For my dynamic web application, I am utilizing AngularJS to create a master page structure. In the index.html file, I have an ng-view where I can inject other pages while keeping the menu, header, and footer constant. index.html <body ng-app="mainApp" ...

Dynamic CSS view size parameter

Currently, I am studying how to create responsive designs using CSS. I decided to test out some example code provided on the w3schools website (https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_webpage). However, I encountered an issue where ...

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

Looking for assistance with a CSS selector in jQuery

I am working with a WordPress blog that has multiple pages with dropdown subpages on hover. However, I only want the main pages to have links, not the subpages. To achieve this, I am using some basic JavaScript. jQuery(document).ready(function(){ jQ ...

Utilizing ng-grid to pass variables within cellTemplate

My ng-grid is connected to a SharePoint list, but I'm facing an issue where the list returns an ID number instead of the user name when populating a field with a user name. To solve this issue, I have created a function that converts the ID to a user ...