Question

Technologies:

javascript

css

reactjs

Tolerim

a day ago

How do I address an overflow problem in a web application built with React.js?

The style sheet being used is causing an overflow problem on mobile and tablet views, although there is no problem on desktop view. Can anyone suggest a solution? This is for a reactjs webapp hosted in firebase. When more tech languages are added, an overflow issue arises, making the content horizontally scrollable. Here is the code for the style sheet:

const AboutPageStyles = styled.div`
  padding: 20rem 0 10rem 0;
  .top-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  .left {
    flex: 3;
  }
  .right {
    flex: 2;
  }
  .aboutsubheading {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    span {
      background-color: var(--deep-dark);
      padding: 0%.5rem;
      border: 8px;
    }
  }
  .aboutheading {
    font-size: 3.6rem;
    margin-bottom: 3rem;
  }

  .aboutinfo {
    margin-bottom: 4rem;
    .para {
      max-width: 100%;
    }
  }
  .button {
    font-size: 2.2rem;
    background-color: ${(props) =>
      props.outline ? 'transparent' : 'var(--gray-1)'};
    padding: 0.3em 1em;
    border-radius: 8px;
    display: inline-block;
    border: 2px solid var(--gray-1);
    color: ${(props) => (props.outline ? 'var(--gray-1)' : 'black ')};
  }

  .right {
    img {
      border: 1px solid var(--gray-1);
      border-radius: 10px;
    }
  }
  .aboutinfoitems {
    margin-top: 15rem;
  }

  .aboutinfoitem {
    margin-bottom: 10rem;
  }
  .aboutinfoheading {
    font-size: 3.6rem;
    text-transform: uppercase;
  }

  @media only screen and (max-width: 768px) {
    padding: 10rem 0;
    .top-section {
      flex-direction: column;
      gap: 5rem;
    }
    .aboutsubheading {
      font-size: 1.8rem;
    }

    .aboutheading {
      font-size: 2.8rem;
    }
    .aboutinfoheading {
      font-size: 3rem;
    }
    .button {
      font-size: 1.8rem;
    }
  }
`;

<div className="aboutinfoitem">
          <h1 className="aboutinfoheading">My Skills</h1>
          <AboutInfoItem
            title="FrontEnd"
            items={[
              'HTML',
              'CSS',
              'JavaScript',
              'C#',
              'ReactJS',
              'Blazor',
              'MAUI',
              'XAML',
            ]}
          />
    </div>

Answers(1)

Accepted Answer

It seems like the issue is with the overflow of the skills section when viewed on mobile and tablet devices. One solution to this could be to wrap the skills section in a container with the CSS property overflow-x: auto. This will make the content horizontally scrollable on smaller screens. Here's an example of how you can modify the code to achieve this:

<div className="about__info__item">
  <h1 className="about__info__heading">My Skills</h1>
  <div style={{overflowX: 'auto'}}>
    <AboutInfoItem
      title="FrontEnd"
      items={[
        'HTML',
        'CSS',
        'JavaScript',
        'C#',
        'ReactJS',
        'Blazor',
        'MAUI',
        'XAML',
      ]}
    />
  </div>
</div>

In this example, we have wrapped the AboutInfoItem component in a div with the inline style overflowX: 'auto'. This will create a horizontal scrollbar for the content inside the div when the screen size is smaller than the content's width.