Advanced Search

CSS - Page Component - Image

/ Published in: CSS
Save to your folder(s)
CSS - Page Component - Image

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .page_component.image {
  2. 	margin:0 0 10px;
  3. 	}               
  4. .page_component.image.right { 
  5. 	float:right;
  6. 	margin:0 0 10px 20px;
  7. 	}                
  8. .page_component.image.left { 
  9. 	float:left;
  10. 	margin:0 20px 10px 0;
  11. 	}               
  12. .page_component.image img { 
  13. 	display:block;
  14. 	overflow:hidden;
  15. 	max-width:100%;
  16. 	height:auto; 
  17. 	}           
  18. .page_component.image .text {
  19. 	position:absolute;
  20. 	padding:10px;
  21. 	right:0;
  22. 	bottom:0;
  23. 	left:0;
  24. 	font-size:11px; font-size:1.1rem;
  25. 	}
  26.  
  27. @media (max-width:767px) {
  28.  
  29. .page_component.image {
  30. 	float:none!important;
  31. 	margin:0 auto 20px!important;
  32. 	}         
  33. .page_component.image .text {
  34. 	display:block;
  35. 	position:relative;
  36. 	right:auto;
  37. 	bottom:auto;
  38. 	left:auto;
  39. 	}
  40.  
  41. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.