Open elisementor opened 7 years ago
these do the same thing and should look identical so try something like this
/* Universal Component - Content Image Box */ .content-image-box { display: flex; padding: 1rem 0 1rem 1rem; border-bottom: 1px solid rgb(245, 245, 245); } .content-image-box:first-child { padding-top: 0; } .content-image-box:last-child { padding-bottom: 0; border-bottom: none; } .content-image-box .media-container { width: 35%; } .content-image-box .text-content { display: flex; flex-direction: column; justify-content: center; width: 65%; padding: 0 0.75rem 0 1rem; } .content-image-box h4 { padding-bottom: .5rem; font-size: 1.25rem; font-weight: bold; } .content-image-box p { padding-bottom: .5rem; } .content-image-box .mobile { display: none; } @media only screen and (max-width: 895px) { .content-image-box .desktop { display: none; } .content-image-box .mobile { display: block; } .content-image-box { padding-left: 0; border-bottom: none; } .content-image-box .media-container { width: 100%; } }
the mobile version has the mobile image
<div class="content-image-box"> <div class="media-container"> <img class="desktop" src="resources/images/information-orientation.jpg"> <img class="mobile" src="resources/images/information-orientation-mobile.jpg"> </div> <div class="text-content"> <h4>Orientation date</h4> <p>Tue 10/11 & Wed 10/12: 8am - 3pm</p> <a href="#">Read more</a> </div> </div>
these do the same thing and should look identical so try something like this
the mobile version has the mobile image