Css linear-gradient 50% left and right To top and bottom on mobile Issue

Question

My basic requirement was to make a 2 column with 50 % red (left) 50% white(right), left column have texts and right column have Image. It works great with my solution on larger to regular screen. Using bootstrap 4, Naturally 2 column will go from side to side top top and bottom. Since i am making the background color using 'linear-gradient', I made a quick media query and made the colors to top and bottom .

The Problem is, I am having to always mess with/Write different media queries and one screen size always break like this

I wrote multiple media queries and adjustments of color % and max height of the image column. It seems like i am fundamentally doing something wrong. Is there a better bootstrap solution for this ? or a better way css that works on all screen?

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}




  Products slider
  
  
  


  
  
  

  
  
  






  test

  
    
      
        
        
          
            
              H2 Apps Headline Here
              Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. 
              Features / Benefits
              
                Modi tempora incidunt ut labore et dolore
                Amagnam aliquam quaerat voluptatem
                Ut enim ad minima veniam, laboriosa
              
              
                
                  Get The App

Temani Afif · Accepted Answer

You need to remove the below from the media query and you can try a pseudo element for the coloration to create an overflow and hide the white part:

.app-headline .text-content-left {
     background: #d4272e;
}

Full code:

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
  overflow:hidden;
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  } 
  .app-headline .text-content-left {
    position:relative;
    z-index:0;
  }
  .app-headline .text-content-left::before {
    content:"";
    position:absolute;
    top:0;
    left:-50vw;
    right:-50vw;
    bottom:0;
    z-index:-1;
    background: #d4272e;
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}




  Products slider
  
  
  


  
  
  

  
  
  






  test

  
    
      
        
        
          
            
              H2 Apps Headline Here
              Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. 
              Features / Benefits
              
                Modi tempora incidunt ut labore et dolore
                Amagnam aliquam quaerat voluptatem
                Ut enim ad minima veniam, laboriosa
              
              
                
                  Get The App

Css linear-gradient 50% left and right To top and bottom on mobile Issue

Answers (2)

Related Questions