[gatsby-theme-cara]: Responsive not working with long content

[carlosvicient]

Description

Hi!

First of all thank you very much for your work and awesome themes. I am very new to gatsby and its ecosystem and I am not sure if this is an actual bug or if it is my fault.

When the content of the sections (e.g.: sections/projects.mdx) is long, the "inner" content height may exceed the "content" parent container. See pictures below.

• Inner container

• Content container

Steps to reproduce

I forked your codesandbox, shadowed projects.mdx and added more projects.

The issue can be reproduced openning the following codesandbox in a phone or resizing the browser: https://codesandbox.io/s/cara-multiple-pages-lbr2e?file=/src/%40lekoarts/gatsby-theme-cara/sections/projects.mdx

Expected result

Content should not overlap with adjacent sections

Actual result

The different sections overlap (see image)

Environment

Environment in codesandbox: https://codesandbox.io/s/cara-multiple-pages-lbr2e?file=/src/%40lekoarts/gatsby-theme-cara/sections/projects.mdx

[devism]

Yes I'd like to know if there is a way to add more cards without the layout breaking on mobile. I was able to make it a little better by adding a 300px breakpoint but it still overflows.

[LekoArts]

Hi, thanks for the issue!

I touched on that same topic in this issue: https://github.com/LekoArts/gatsby-themes/issues/405 You can change the factor of each section to e.g. enlarge it so that it can hold more information. It's a limitation of the underlying parallax library that it can't auto-adjust to the content itself.

Will close this as answered, thanks for using my theme!

[carlosvicient]

Thanks for the feedback and for the theme, @LekoArts.

I had partially fixed the problem by shadowing cara.tsx template to adjust the different values for pages, offset and factor according to the size of my new content and the size of the different devices I wanted to render the page. This is only an "ad hoc" solution that only works for the size of my content.

Here is the code (notice I am using a react hook to change the parameters based on windows size):

import React, { useState, useEffect } from "react"
import { Parallax } from "react-spring/renderprops-addons.cjs"
import { window, exists } from "browser-monads"

import Layout from "@lekoarts/gatsby-theme-cara/src/components/layout"
import Hero from "@lekoarts/gatsby-theme-cara/src/components/hero"
import Projects from "@lekoarts/gatsby-theme-cara/src/components/projects"
import About from "@lekoarts/gatsby-theme-cara/src/components/about"
import Contact from "@lekoarts/gatsby-theme-cara/src/components/contact"
import Footer from "../components/footer"

// breakpoints: [`400px`, `600px`, `900px`, `1200px`, `1600px`],
// The template is not responsive and the parallax effect brokens the containers.
// As a work around, use react hooks (useEffect) to calculate the size of the window
// and change number of pages and offset. This should be done calculating the size of each section first
// but in this version is hardcoded based on different tests

const Cara = () => {
  // Client-side Runtime fetch browser width
  const { pages, projectsOffset, projectsFactor, aboutOffset, aboutFactor, contactOffset, contactFactor } = useWindowWidth(); // Our custom Hook

  return (
    <Layout>
      <Parallax pages={pages}>
        <Hero offset={0} factor={1} />
        <Projects offset={projectsOffset} factor={projectsFactor} />
        <About offset={aboutOffset} factor={aboutFactor} />
        <Contact offset={contactOffset} factor={contactFactor} />
        <Footer/>
      </Parallax>
    </Layout>
  )
}

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  let breakpoints = {
    pages: 7, 
    projectsOffset: 1, 
    projectsFactor: 3, 
    aboutOffset:4, 
    aboutFactor: 1,
    contactOffset:5, 
    contactFactor: 2,
    width: width
  };

  if(exists(window)){
    useEffect(() => {

      const handleResize = () => setWidth(window.innerWidth);
      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
      };
    });

    switch (true) {
      case (width <= 400):
        breakpoints.pages = 11;

        breakpoints.projectsOffset = 2;
        breakpoints.projectsFactor = 6;

        breakpoints.aboutOffset = 8;
        breakpoints.aboutFactor = 1;

        breakpoints.contactOffset = 9.5;
        breakpoints.contactFactor = 1;
        break;
      case (width <= 600):
        breakpoints.pages = 10;

        breakpoints.projectsOffset = 2.5;
        breakpoints.projectsFactor = 4;

        breakpoints.aboutOffset = 7;
        breakpoints.aboutFactor = 1;

        breakpoints.contactOffset = 8;
        breakpoints.contactFactor = 1;
        break;
      case (width <= 900):
        //using the default
        break;
      case (width <= 1200):
        //using the default
        break;
      case (width > 1600):
        //using the default
        break;
    }
  }

  // console.log("breakpoints", breakpoints.pages, breakpoints.projectsOffset, breakpoints.projectsFactor, breakpoints.aboutOffset, breakpoints.aboutFactor)

  return breakpoints;
}

/*Original theme.
const Cara = () => (
  <Layout>
    <Parallax pages={10}>
      <Hero offset={0} factor={1} />
      <Projects offset={2.5} factor={4} />
      <About offset={7} factor={1} />
      <Contact offset={8} factor={1} />
    </Parallax>
  </Layout>
)
*/

export default Cara

Hope it might help someone. Thanks for the theme again!