internal
/
Loops_Sustainability
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed tablet view

This commit is contained in:
hardik 2025-02-14 10:23:53 +05:30
parent 6383716b8f
commit cc327002dd
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/header.tsx
View File

@ -22,7 +22,7 @@ const Header: React.FC = () => {
width: {
xs: "91.6vw",
sm: "95.5vw",
md: "91.6vw",
md: "96.5vw",
lg: "96.8vw",
xl: "96.4vw"
},

32
src/components/homepage.tsx
View File

@ -113,11 +113,11 @@ const HomePage: React.FC = () => {
{/* Grid 2 */}
<Box
sx={{
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 },
height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
width: '100%',
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
backgroundSize: "contain",
backgroundPosition: { lg: "center", xs: "50% 86%" },
backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
backgroundRepeat: "no-repeat",
paddingBottom: { lg: 20, xs: 0 }
}}
@ -131,7 +131,7 @@ const HomePage: React.FC = () => {
}}
>
{/* ROW 1 */}
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Box ref={mineRef} sx={{
height: { xs: "70%", lg: "215px" },
width: { xs: "80%", lg: "870px" },
@ -153,11 +153,11 @@ const HomePage: React.FC = () => {
</Box>
</Box>
</Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' } }}></Grid>
{/* ROW 2 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none' } }}></Grid>
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
<Box ref={manufactureRef} sx={{
height: { xs: "472px", lg: "215px" },
width: { xs: "80%", lg: "552px" },
@ -182,7 +182,7 @@ const HomePage: React.FC = () => {
</Grid>
{/* ROW 3 */}
<Grid item xs={12} lg={6} sx={{
<Grid item xs={12} lg={6} md={6} sx={{
background: '#ffffff00', height: { xl: "500px", lg: '401px' },
display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
}}>
@ -209,11 +209,11 @@ const HomePage: React.FC = () => {
</Box>
</Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' } }}></Grid>
{/* ROW 4 */}
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none' } }}></Grid>
<Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
<Box ref={useRefBox} sx={{
height: { xs: "451px", lg: "215px", sm: '555px' },
width: { xs: "80%", lg: "550px" },
@ -352,10 +352,10 @@ const HomePage: React.FC = () => {
</Box>
</Grid>
{/* mobile only */}
<Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
<Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
{/* Reuse */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Reuse</Typography>
<Typography variant="body2">
@ -370,7 +370,7 @@ const HomePage: React.FC = () => {
{/* Repair */}
<Grid item xs={6}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ background: "#95CD41", p: 1 }}>
<Typography variant="h4">Repair</Typography>
<Typography variant="body2">
@ -387,7 +387,7 @@ const HomePage: React.FC = () => {
{/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
<Grid item xs={6} sx={{ mt: 2 }}>
<Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
<Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}>
<img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
</Box>
@ -401,11 +401,11 @@ const HomePage: React.FC = () => {
{/* Remine */}
<Grid item xs={6} sx={{ mt: 2 } }>
<Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
<Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
<Box sx={{ width: "100%" }}>
<img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
</Box>
<Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left' }}>
<Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
<Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography>
<Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
</Box>