JavaScript – Responding to grid error using styled components.

I am building my portfolio where I have created the reaction component where I will use the reaction grid. The grid has 2 columns, one containing a profile photo and the other a bar to improve my skills. My grid works fine on computer screens, but as the screen size shrinks to less than 768px, the second column suddenly disappears.

Below is my response code:

import React from 'react'
import img from '../../images/1cut.png'
import {
  AboutContainer,
  AboutWrapper,
  AboutRow,
  Column1,
  Column2,
  ImgWrapper,
  Img,
  TextWrapper,
  TopLine,
  Heading,
  Progress,
  ProgressDone,
} from './aboutMe2Elements'
const AboutMe2 = (props) => {
  return (
    <>
      <AboutContainer id='about'>
        <AboutWrapper>
          <AboutRow>
            <Column1>
              <ImgWrapper>
                <Img src={img} alt="Profile Photo" />
              </ImgWrapper>
            </Column1>
            <Column2>
              <TextWrapper>
                <TopLine>My Skills</TopLine>
                <Heading>Frontend Development</Heading>
                <Progress>
                  <ProgressDone width={85}></ProgressDone>
                </Progress>
                <Heading>Backend Development</Heading>
                <Progress>
                  <ProgressDone width={75}></ProgressDone>
                </Progress>
                <Heading>Data Structures and Algorithms</Heading>
                <Progress>
                  <ProgressDone width={69}></ProgressDone>
                </Progress>
              </TextWrapper>
            </Column2>
          </AboutRow>
        </AboutWrapper>
      </AboutContainer>
    </>
  )
}

export default AboutMe2

Here is my style component code:

import styled from 'styled-components'

export const AboutContainer = styled.div`
  color: #fff;
  background: #010606;
  @media screen and(max-width:768px) {
    padding: 100px 0;
  }
`
export const AboutWrapper = styled.div`
  display: grid;
  z-index: 1;
  height: 900px;
  width: 100%;
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 24px;
  justify-content: center;
`
export const AboutRow = styled.div`
  display: grid;
  grid-auto-columns: minmax(auto, 1fr);
  align-items: center;
  grid-template-areas: 'col1 col2';
  @media screen and (max-width: 1100px) {
    grid-template-areas: 'col1 ' 'col2';
  }
`
export const Column1 = styled.div`
  margin-bottom: 15px;
  padding: 0 15px;
  grid-area: col1;
`
export const Column2 = styled.div`
  margin-bottom: 15px;
  padding: 0 15px;
  grid-area: col2;
`

export const ImgWrapper = styled.div`
  max-width: 555px;
  height: 100%;
  background: #010606;
`
export const Img = styled.img`
  width: 100%;
  margin: 0 0 10px 10;
  background: #010606;
  padding-right: 0;
`

export const TextWrapper = styled.div`
  max-width: 540px;
  padding-top: 0;
  padding-bottom: 60px;
`
export const TopLine = styled.p`
  color: #01bf71;
  font-size: 20px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
`
export const Heading = styled.h1`
  color: #fff;
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  color: #f7f8fa;
  @media screen and (max-width: 480px) {
    font-size: 32px;
  }
`

export const Progress = styled.div`
  background-color: #fff;
  border-radius: 20px;
  position: relative;
  margin: 15px 0;
  height: 20px;
  width: 300px;
`
export const ProgressDone = styled.div`
  background: #01bf71;
  /* box-shadow: 0 3px 3px -5px #01bf71, 0 2px 5px #01bf71; */
  border-radius: 20px;
  color: #fff;
  display: flex;

  align-items: center;
  justify-content: center;
  height: 100%;
  width: ${(props) => (props.width ? props.width + '%' : 0)};
  opacity: 1;
  transition: 1s ease 0.3s;
`

This is what the computer screen looks like.

This is what it looks like on a mobile screen.

Leave a Reply

Your email address will not be published.