CSS - Page Component - Image


/ Published in: CSS
Save to your folder(s)

CSS - Page Component - Image


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.