html - Display Flex causing responsive issues -
i have container 2 divs in it, image left 50% , text right 50%. text section has read more link expand it's containing div giving both image , text more height, -
closed
open
div.feature { display: flex; flex-flow: row wrap; justify-content: center; width: 100%; } div.feature>div.feature-image { background-size: cover; position: relative; display: flex; align-items: center; justify-content: center; } div.feature>div.feature-image, div.feature>div.feature-description { float: left; width: 50%; }
<div class="feature"> <div class="feature-image" style="background-image: url('http://cablelabs.dev/wp-content/uploads/2017/07/smart-drugs-banner.jpg');"></div> <div class="feature-description"> <div class="featured-description-container"> <h3>smart drugs/meds</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br> <div class="slidingdiv" style="display: block;"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="read-more-button-container"> <a href="#" class="show_hide tech-read-more-button" style="display: inline-block;">read less</a> </div> </div> </div> </div>
i using flex achieve functionality. works on full screen when goes down smaller screen sizes height of image 0
. can explain why image isn't showing on smaller screens?
Comments
Post a Comment