css - Layout for welcome modal with prev/next buttons -
i'm trying design informational , instructional welcome modal box 3 "pages" using custombox.js
the modal appears in middle of screen, need display content in middle of modal, previous button left, next right , footer showing progress.
i did using css grid layout, many of users not have browsers support this. can't figure out how make using plain css...
here's html
<div id="modal"> <div id="leftnnav"> <i id="leftnnavimage" class="fa fa-chevron-left" aria-hidden="true"></i> </div> <div id="modalcontent1" class="modalcontent activemodalcontent"> <img id="modalcontentmedia" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"/> content text goes here, lots , lots , lots , lots , lots , lots more </div> <div id="modalcontent2" class="modalcontent"> content2 = yt video </div> <div id="modalcontent3" class="modalcontent"> content3 = text </div> <div id="rightnnav"> <i id="rightnnavimage" class="fa fa-chevron-right" aria-hidden="true"></i> </div> <div id="modalfooter"> <svg height="40" width="40"> <circle id="circle1" class="circle activecircle" cx="20" cy="20" r="10"></circle> </svg> <svg height="40" width="40"> <circle id="circle2" class="circle" cx="20" cy="20" r="10"></circle> </svg> <svg height="40" width="40"> <circle id="circle3" class="circle" cx="20" cy="20" r="10"></circle> </svg> </div> </div>
https://jsfiddle.net/oppt6v9j/15/
but way ends messy, text overflows , doesn't feel correct way things, feel i'm missing obvious. know can resize image using media queries, that's fine, i'm not sure how manage text.
any how can design modal in css appreciated!
if problem aligning components, suggest following
.right { float: right; } .left { float: left; } .modal { display: flex; } .modalcontent { margin: auto; }
i believe using id's css selectors bad practice.
hope helps.
Comments
Post a Comment