Layout for welcome modal with prev/next buttons - css

Question

I'm trying to design an informational and instructional welcome modal box with 3 "pages" using custombox.js
The modal appears in the middle of the screen, I then need to display content in the middle of the modal, with a previous button to the left, next to the right and a footer showing progress.
I did this successfully using CSS grid layout, but many of the users do not have browsers that support this. I can't figure out how to make this using plain CSS...
Here's my 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 and lots and lots and lots and lots and 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 this way just ends up really messy, the text overflows and it just doesn't feel like the correct way to do things, I feel like I'm missing something really obvious. I know I can resize the image using media queries, so that's fine, but I'm not sure how to manage the text.
Any help with how I can design this modal in CSS is very much appreciated!

Answer 1

If your problem with aligning the components, I would suggest the following
.right { float: right; }
.left { float: left; }
.modal { display: flex; }
.modalContent { margin: auto; }
I believe using ID's as CSS selectors is bad practice.
Hope it helps.

Answer 2

Right, this is a tough one since I don't know the exact dimensions of the box (and you use alot of position: absolutes).
I'd imagine it varies with screen size but your image has a height/width set (300px by 150px) so I focused on that size instead.
Note This is not an "end all be all" answer, it won't solve every usecase under the sun, rather it answers the original question:
But this way just ends up really messy, the text overflows and it just
doesn't feel like the correct way to do things, I feel like I'm
missing something really obvious.
It does this by providing a way of thought rather than a clear answer.
The solution
You're using a lot of absolute positions, this means you have to work with alot of magic numbers. Try converting them to relative positions instead.
The text is really easy, you should wrap it in a <p> tag like so:
<p>
Content text goes here, lots and lots and lots and lots and lots and lots more
</p>
And style it appropriately (box padding / corners etc):
p {
color: #001818;
padding-right: 40px;
}
The same holds true for the image:
#modalContentMedia{
width: 300px;
height: 150px;
margin-left: 15px;
}
And I'm not sure where you'd want the arrows positioned (they are in the center of the box right now) but I can imagine you'd want them in the center of the image. To do so use:
#leftNnav{
position: absolute;
cursor: pointer;
z-index: 20;
padding-left: 10px;
left: 5px;
top: calc(50% - 40px);
}
#rightNnav{
position: absolute;
cursor: pointer;
z-index: 20;
padding-right: 10px;
right: 5px;
top: calc(50% - 40px);
}
This makes the entire thing look much neater:
By illustrating how I would start solving this issue I've demonstrated fixing the 3 major things (text, image position not centered, arrows) and trust you'll be able to learn and fix the rest of the issues yourself.