How to make a website responsively by using padding and width?


I just getting started learning about responsive apps.
When I google it, there is so many ways to do it. Based on my understanding, using % or vh or vw or mind-width. However, I have no idea why my part of not responsible even I assign it with %. I will attach the image below. the number should be shown as 11/30 12/1 1/1 2/2 3/6 4/7 5/8 all of seven numbers. However, there is only 5 or less than 4 3 2 numbers.

enter image description here

Top of div, I declare with padding: 2%; width: 100vw; and in the number div, I declare with margin-left: 3.5%; margin-right: 3.5%;

I really appreciate your help!

I will leave a code below just in case

<DropDownContainer>
        <DetailKorean>자세히 보기</DetailKorean>
        <FaChevronDown className="DetailIcon" />
      </DropDownContainer>
      <WeekendScheduleWrapper>
        <WeekendScheduleKorean>일주일 스케줄</WeekendScheduleKorean>
        <WeekendScheduleDateWrapper>
          {dates.map(obj => (
            <WeekendScheduleDate>{obj.date}</WeekendScheduleDate>
          ))}
        </WeekendScheduleDateWrapper>

        <DateInfo>
          <DetailInfoKorean>- 9/13일은 대체 공휴일이에요</DetailInfoKorean>
          <DetailInfoKorean>- 9/9일은 선거일에요</DetailInfoKorean>
        </DateInfo>
      </WeekendScheduleWrapper>
const BusinessContent = styled.div`
  /* margin: 0 auto; */
  padding: 2%;
  width: 100vw;
  /* min-width: 500px; */
  /* .BarChart {
    width: 360px;
    height: 200px;
    barsize: 15;
    margin: 20px, 30px, --20px, 5px;
  } */
`;
// const TestWrapper = styled.div`
//   padding: 1%;
//   min-width: 30%;
// `;
const DropDownContainer = styled.div`
  display: flex;
  font-size: 40px;
  color: red;
  margin-bottom: 2%;

  .DetailIcon {
    font-size: 40px;
  }
`;

const DetailKorean = styled.span`
  /* margin-right: 10px; */
  margin-bottom: 1.5%;
`;

const WeekendScheduleWrapper = styled.div`
  padding-top: 1%;
  padding-left: 1%;
`;

const WeekendScheduleKorean = styled.div`
  font-size: 60px;
  font-weight: 500;
  margin-bottom: 2.5%;
  /* padding-bottom: 70px; */
`;
const WeekendScheduleDateWrapper = styled.div`
  width: 100vw;
`;
const WeekendScheduleDate = styled.span`
  margin-left: 3.5%;
  margin-right: 3.5%;
  font-size: 60px;
  font-weight: 600;
`;

Source: CSS – Stack Overflow

November 30, 2021
Category : News
Tags: css | html | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.