NextJs+Chakra UI+Tailwind移动端图片容器布局问题求助

核心问题分析 #

1. 嵌套GridItem多余：父级已经是GridItem，内层再用GridItem会继承外层Grid的列规则，导致移动端布局错乱。
2. 移动端样式适配缺失：w-full让容器占满父级宽度，搭配p-14的超大内边距直接撑爆移动端视野；-bottom-32的偏移量在移动端过大，导致容器覆盖图片甚至周边内容。
3. 全局样式未区分设备：所有样式统一生效，没有针对移动端做响应式调整。

具体修改步骤 #

• 把内层GridItem换成Chakra的Box组件，避免Grid规则冲突。
• 给容器设置响应式宽度：移动端用w-[90%]（或max-w-full配合左右内边距），大屏保持md:w-auto。
• 调整响应式内边距：将p-14改为p-6 md:p-14，缩小移动端内边距。
• 优化定位偏移：把-bottom-32改成-bottom-20 md:-bottom-32，减少移动端向上偏移量，避免过度覆盖图片。
• 确保Next.js Image组件自适应：给Image加上w-full h-auto，保证它占满父级可用宽度且高度按比例自适应。

修改后的代码 #

<Grid templateColumns="repeat(6, 1fr)" className="pb-52">
  {/* other grid items */}
  <GridItem
    colSpan={6}
    className="flex justify-center items-center relative"
  >
    <Image 
      src={feature} 
      className="pt-20 px-4 w-full h-auto" 
      alt="featured work"
      width={1200}
      height={600}
    />
    <Box
      className="absolute left-1/2 transform -translate-x-1/2 -bottom-20 md:-bottom-32 w-[90%] md:w-auto p-6 md:p-14"
      maxW="800px"
      style={{
        background: "linear-gradient(315deg, #0FB81B 0%, #129A8E 100%)",
      }}
    >
      <Text className="text-xl md:text-2xl font-bold text-white pb-3">
        Our Own Product
      </Text>
      <Text
        className="text-3xl md:text-5xl font-bold text-white pb-7"
        style={{ letterSpacing: "-1px" }}
      >
        Where there is cricket, there is CricksLab!
      </Text>
      <Button
        style={{
          backgroundColor: "white",
          color: "#FE7701",
          fontSize: "16px",
          fontWeight: "bold",
        }}
        className="p-4 md:p-7"
        rightIcon={<Image src={arrowRightUpOrange} alt="arrow right up" />}
      >
        View Case Study
      </Button>
    </Box>
  </GridItem>
  {/* other grid items */}
</Grid>

额外优化说明 #

• 文本大小做了响应式调整：text-xl md:text-2xl和text-3xl md:text-5xl，避免移动端文字溢出容器。
• 按钮内边距改为p-4 md:p-7，兼顾移动端触控区域大小和大屏视觉效果。

内容的提问来源于stack exchange，提问作者fahad khan