Add styles for small devices to .onboarding-modal (#2748)
This commit is contained in:
		
							parent
							
								
									90c00f075a
								
							
						
					
					
						commit
						e61ecf4091
					
				@ -2827,6 +2827,19 @@ button.icon-button.active i.fa-retweet {
 | 
				
			|||||||
  margin-right: 10px;
 | 
					  margin-right: 10px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (max-width: 400px) {
 | 
				
			||||||
 | 
					  .onboarding-modal__page-one {
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .onboarding-modal__page-one__elephant-friend {
 | 
				
			||||||
 | 
					    width: 100%;
 | 
				
			||||||
 | 
					    height: 30vh;
 | 
				
			||||||
 | 
					    max-height: 160px;
 | 
				
			||||||
 | 
					    margin-bottom: 5vh;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.onboarding-modal__page-two,
 | 
					.onboarding-modal__page-two,
 | 
				
			||||||
.onboarding-modal__page-three,
 | 
					.onboarding-modal__page-three,
 | 
				
			||||||
.onboarding-modal__page-four,
 | 
					.onboarding-modal__page-four,
 | 
				
			||||||
@ -2889,6 +2902,30 @@ button.icon-button.active i.fa-retweet {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (max-width: 320px) and (max-height: 600px) {
 | 
				
			||||||
 | 
					  .onboarding-modal__page p {
 | 
				
			||||||
 | 
					    font-size: 14px;
 | 
				
			||||||
 | 
					    line-height: 20px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .onboarding-modal__page-two .figure,
 | 
				
			||||||
 | 
					  .onboarding-modal__page-three .figure,
 | 
				
			||||||
 | 
					  .onboarding-modal__page-four .figure,
 | 
				
			||||||
 | 
					  .onboarding-modal__page-five .figure {
 | 
				
			||||||
 | 
					    font-size: 12px;
 | 
				
			||||||
 | 
					    margin-bottom: 10px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .onboarding-modal__page-four__columns .row {
 | 
				
			||||||
 | 
					    margin-bottom: 10px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .onboarding-modal__page-four__columns .column-header {
 | 
				
			||||||
 | 
					    padding: 5px;
 | 
				
			||||||
 | 
					    font-size: 12px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.onboarding-modal__image {
 | 
					.onboarding-modal__image {
 | 
				
			||||||
  border-radius: 8px;
 | 
					  border-radius: 8px;
 | 
				
			||||||
  width: 70vw;
 | 
					  width: 70vw;
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user