Answered
Div working with background
Could someone please look at this and tell me how to get the calendar div to follow the background and stay aligned when it's in full screen. view.
Thanks in advance
d.
As a designer, I strive to find solutions even if they'll not all 100%
fiveflightsup wrote
As a designer, I strive to find solutions even if they'll not all 100%
You may find the code below useful. Its not responsive but will work if that is not a concern to you. Your original coding did not look as though you were taking responsive into consideration - as others have said the concept would be difficult to achieve without some rethinking to make it responsive.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Calender</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color: #C83740;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-width: 1100px;
}
.calendar_wrapper {
display: flex;
justify-content: center;
background-image: url(calendar.png);
background-repeat: no-repeat;
height: 770px;
width: 1025px;
border: 1px solid #000;
}
.calendar_dates {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 115px;
position: relative;
width: 795px;
height: 600px;
}
.day {
display: flex;
align-items: center;
justify-content: flex-end;
width: 14%;
padding: 0 15px;
background-color: rgba(255, 255, 255, 0.7);
color: #F00;
margin-bottom: 2px;
font-size: xx-large;
font-weight: 600;
}
.date {
display: flex;
align-items: center;
justify-content: flex-end;
width: 14%;
padding: 0 15px;
background-color: rgba(0, 0, 61, 0.4);
color: #fff;
margin-bottom: 2px;
font-size: 24px;
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
<div class="calendar_wrapper">
<div class="calendar_dates">
<div class="day">S</div>
<div class="day">M</div>
<div class="day">T</div>
<div class="day">W</div>
<div class="day">T</div>
<div class="day">F</div>
<div class="day">S</div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"><span>1</span></div>
<div class="date"><span>2</span></div>
<div class="date">3</div>
<div class="date">4</div>
<div class="date">5</div>
<div class="date">6</div>
<div class="date">7</div>
<div class="date">8</div>
<div class="date">9</div>
<div class="date">10</div>
<div class="date">11</div>
<div class="date">12</div>
<div class="date">13</div>
<div class="date">14</div>
<div class="date">15</div>
<div class="date">16</div>
<div class="date">17</div>
<div class="date">18</div>
<div class="date">19</div>
<div class="date">20</div>
<div class="date">21</div>
<div class="date">22</div>
<div class="date">23</div>
<div class="date">24</div>
<div class="date">25</div>
<div class="date">26</div>
<div class="date">27</div>
<div class="date">28</div>
<div class="date">29</div>
<div class="date">30</div>
<div class="date">31</div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
</div>
<!-- end calendar_dates -->
</div>
<!-- end calendar -->
</body>
</html>
AdChoices