BASE APPAREL (FLEXBOX + JAVASCRIPT)

Community feedback

• 

  Aditya Yadav•710

  @mraditya1999

  Posted almost 2 years ago

  for simpler solution to make it responsive and elegant design you can follow these steps:

  /* CSS code for the container and the two divs */
  .container {
    display: flex;
  }
  
  .left-section, .right-section {
    width: 50%;
    height: 100%;
  }
  
  .right-section {
    background-image: url("path/to/your/image.jpg"); /* Set background image for the right section */
    background-size: cover; /* Adjust the background image size to cover the container */
    background-position: center; /* Center the background image within the container */
  }
  
  /* Media query for screen sizes below 800px */
  @media (max-width: 800px) {
    .container {
      flex-direction: column; /* Display the divs vertically on smaller screens */
    }
  
    .left-section, .right-section {
      width: 100%; /* Make the divs occupy full width on smaller screens */
    }
  }
  

  With this CSS code, we create a container with flex display and two divs inside it, .left-section and .right-section. Both divs will have a width of 50% each, occupying half of the container's width. The .right-section will have the specified background image, which will cover the container and remain centered within it.

  For smaller screens below 800px, we use a media query to change the flex-direction to column, making the divs stack vertically. We also set both divs to occupy the full width, eliminating the repeating background image and ensuring a clean and professional design.

  10

  Marked as helpful