seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

Update MainPageLayout styles for improved layout consistency: Adjusted positioning properties for titles to enhance visual alignment and responsiveness across different page types, ensuring a more cohesive user experience.

Browse Source
This commit is contained in:
sebseb7
2025-07-16 06:30:49 +02:00
parent 6b7bcf4155
commit 13f1e14a3d
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/MainPageLayout.js
View File

@@ -136,7 +136,8 @@ const MainPageLayout = () => {
display: { xs: "block", sm: "none" }, display: { xs: "block", sm: "none" },
mb: { xs: 2, sm: 0 }, mb: { xs: 2, sm: 0 },
width: "100%", width: "100%",
textAlign: "center" textAlign: "center",
position: "relative"
}}> }}>
{Object.entries(allTitles).map(([pageType, title]) => ( {Object.entries(allTitles).map(([pageType, title]) => (
<Typography <Typography
@@ -152,9 +153,9 @@ const MainPageLayout = () => {
transition: "opacity 0.5s ease-in-out", transition: "opacity 0.5s ease-in-out",
opacity: getOpacity(pageType), opacity: getOpacity(pageType),
position: pageType === "home" ? "relative" : "absolute", position: pageType === "home" ? "relative" : "absolute",
top: pageType !== "home" ? "50%" : "auto", top: pageType !== "home" ? 0 : "auto",
left: pageType !== "home" ? "50%" : "auto", left: pageType !== "home" ? 0 : "auto",
transform: pageType !== "home" ? "translate(-50%, -50%)" : "none", transform: "none",
width: "100%", width: "100%",
pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none", pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" }, lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },