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.