I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement media queries and breakpoints. Perhaps there is something crucial that I am overlooking.
Despite reading through the breakpoint documentation for MUI, I find myself unable to successfully integrate them. My CSS media queries do not seem to be adjusting the layout as desired, specifically in creating a breakpoint at 780px to transition the layout into a single column.
Any assistance on this matter would be greatly appreciated.
App.js
import './App.css';
import './Dog.js';
import './index.css';
import "./Grid.js";
import NestedGrid from './Grid.js';
import "./Resize.js";
function DogApp() {
return (
<div className="dogApp">
<div className ="fixThis">
<NestedGrid />
</div>
</div>
);
}
export default DogApp;
FetchAPI.js
import React, { useState, useEffect } from 'react'
const FetchAPI = () => {
const [show, setShow] = useState({});
const [data, setData] = useState([]);
const apiGet = () => {
const API_KEY = "";
fetch(`https://api.thedogapi.com/v1/images/search?limit=2&page=10&order=Desc?API_KEY=${API_KEY}`)
.then((response) => response.json())
.then((json) => {
console.log(json);
setData([...data, ...json]);
});
};
useEffect(() => { //call data when pagee refreshes/initially loads
apiGet();
}, []);
return (
<div>
{data.map((item, id) => (
<div class="dog">
<img alt="dog photos" class="dogImg" src={item.url}></img>
{show[id] === false ? <p>{JSON.stringify(item.breeds)}</p> : null}
<button onClick={() => setShow((prev) => ({ ...prev, [id]: false }))}>Learn more about this dog!</button>
<button onClick={() => setShow((prev) => ({ ...prev, [id]: true }))}>Hide information</button>
</div>
))}
</div>
)
}
export default FetchAPI;
Grid.js
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import FetchAPI from './FetchAPI';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(4),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
function FormRow() {
return (
<React.Fragment>
<Grid item xs={4}>
<Item>
<FetchAPI />
</Item>
</Grid>
<Grid item xs={4}>
<Item>
<FetchAPI />
</Item>
</Grid>
<Grid item xs={4}>
<Item>
<FetchAPI />\
</Item>
</Grid>
</React.Fragment>
);
}
export default function NestedGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid container item spacing={3}>
<FormRow />
</Grid>
<Grid container item spacing={3}>
<FormRow />
</Grid>
<Grid container item spacing={3}>
<FormRow />
</Grid>
</Grid>
</Box>
);
}
index.css
* {
margin : 0;
padding :0;
box-sizing: border-box;
}
.idDog{
font-size: 1.5rem;
}
.flexOne{
display: flex;
flex-direction: row !important;
width: 50%;
}
.reSizeImage{
width: 25%;
height: 25%;
padding: 10px;
}
.dogImg{
width: 650px;
height: 30vh;
place-content: center;
object-fit: cover;
}
.flexTwo{
text-align: center;
}
button{
font-size: 1.2rem;
font-weight: bolder;
padding: 10px;
border-radius: 20px;
margin-top: 10px !important;
margin-bottom: 10px !important;
height: 2.5vh;
display: grid;
place-items: center;
margin: 0 auto;
background-color: rgb(223, 217, 217);
}
@media screen and (max-width: 780px){
.dogApp {
display: flex !important;
flex-direction: column !important;
}
.fixThis{
flex-direction: column !important;
}
}