right div dissappears when window resizes - html

Question

I have two divs sort of like a 50 50 divided screen, and so it looks good in computer size screen and in phone screen but right between these two, the right div just dissappears and I cant figure it out.
originally the code is echoed in php and the information is from a database so I put here some dummy info.
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 72px 0 0 0;
overflow: hidden;
}
/*style for the slider container*/
.slidercon {
width: 50vw;
height: 100vh;
overflow: hidden;
float: left;
display: table;
}
.maincon {
width: 100%;
display: table-cell;
vertical-align: middle;
}
.imgslider {
margin: auto;
max-width: 560px;
max-height: 315px;
overflow: hidden;
position: relative;
}
.imgslider>ul {
margin: 0;
padding: 0;
display: flex;
position: relative;
top: 0;
left: 0;
transition: 0.2s;
width: 100%;
}
.imgslider>ul>li {
list-style-type: none;
min-width: 560px;
overflow: hidden;
}
.imgdiv {
width: 100%;
height: 315px;
justify-content: center;
text-align: center;
}
.imgdiv>img {
width: auto;
max-height: 315px;
}
.youtubevid {
display: flex;
display: -webkit-flex;
display: -ms-flex;
}
/*style for the dots*/
.dotsContainer {
text-align: center;
}
.dots {
cursor: pointer;
height: 20px;
width: 20px;
margin: 5px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dots:first-child {
background: white;
border: 1px solid grey;
;
}
/*content style*/
.content {
float: right;
width: 50vw;
height: 100vh;
overflow: hidden;
display: table;
text-align: right;
}
.innercont {
/* padding: 15px; */
direction: rtl;
display: table-cell;
vertical-align: middle;
}
.innercont>span:first-child {
font-size: 40px;
padding: 25px;
display: block;
}
.innercont>span:nth-child(2) {
padding: 25px;
font-size: 20px;
display: block;
word-wrap: break-word;
}
.price {
padding: 10px;
font-size: 22px;
}
.price>span {
margin: 0 15px;
}
.price>span:nth-child(2) {
float: left;
}
/*style for the phone number input*/
.PhoneN-section {
position: relative;
height: 50px;
margin: 15px;
}
.PhoneN-section input {
width: 100%;
height: 100%;
border-radius: 10px;
outline: none;
border: 1px solid rgb(230, 230, 230);
font-size: 20px;
padding: 10px 10px 0 10px;
text-align: left;
direction: ltr;
}
input:focus~.PhoneN-label .label-content,
input:valid~.PhoneN-label .label-content {
transform: translateY(-120%);
}
label:not([for="checkbox"]) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.label-content {
font-size: 20px;
position: absolute;
bottom: 10px;
right: 10px;
transition: all 0.3s ease;
background: white;
}
input:focus {
border: 2px solid rgb(76, 240, 0);
transition-delay: 0.2s;
}
/*style for the submit button*/
.phone-submit {
height: 50px;
margin: 15px 0;
}
.phone-submit button {
width: 100%;
height: 100%;
outline: none;
border: none;
border-radius: 10px;
color: white;
background: rgb(76, 240, 0);
cursor: pointer;
font-size: 20px;
}
/*style for the exclamation message*/
.mark {
float: right;
margin: 0 5px;
font-size: 14px;
font-weight: 600;
padding: 2px 7px;
border-radius: 50%;
border: 1px solid grey;
}
.messaget {
color: grey;
}
#media screen and (max-width: 850px) {
body {
overflow-y: auto;
}
.slidercon {
width: unset;
height: unset;
float: unset;
display: block;
}
.maincon {
display: block;
}
.content {
float: none;
width: unset;
height: 100vh;
display: block;
}
.innercont {
display: block;
}
}
#media screen and (max-width: 550px) {
.imgdiv {
justify-content: unset;
text-align: unset;
}
.imgdiv>img {
margin: 0 20%;
}
}
#media only screen and (max-width: 550px) {
.imgdiv>img {
margin: 0 10%;
}
}
#media only screen and (max-width: 420px) {
.imgdiv>img {
margin: 0 7%;
}
}
#media only screen and (max-width: 400px) {
.imgdiv>img {
margin: 0 5%;
}
}
<div class="slidercon">
<div class="maincon">
<div class="imgslider">
<ul>
<li>
<div class="imgdiv">
<img src="img" alt="item">
</div>
</li>
<li>
<div class="youtubevid">
<iframe style="position:absolute;width:100%;height:100%;" src="link" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>';
</ul>
</div>
<div class="dotsContainer">
<span class="dots"></span>
<span class="dots"></span>
</div>
</div>
</div>
<div class="content">
<div class="innercont">
<span>'Type'</span>
<span>'Description'</span>
<div class="price">
<span>Price</span>
<span>'1,111' ₪</span>
</div>
<form action="includes/sendPhone.php" method="POST">
<div class="PhoneN-section">
<input type="text" name="PhoneN" autocomplete="off" required />
<input type="hidden" name="itemid" value="id" />
<input type="hidden" name="itemtype" value="TYPE" />
<input type="hidden" name="price" value="1,111" />
<label for="PhoneN" class="PhoneN-label">
<span class="label-content">Phone Number</span>
</label>
<div class="phone-submit">
<button type="submit" name="phone-submit">SEND</button>
</div>
<span>
<span class="mark">!</span>
<span class="messaget">BLa lbla bla bla bla bla bla bla bla blab la</span>
</span>
</div>
</form>
</div>
</div>

Answer 1

In accordance to my understanding,your issue is that it is not responsive to some devices.
So i tried it out using flex box approach.
I added a container wrapper to all other divs and have it display its children in a flex manner.
Then added two inner containers each width 50vw containing your slider con and content respectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 72px 0 0 0;
overflow: hidden;
}
.container{
display: flex;
}
.innercontainer{
width: 50vw;
}
/*style for the slider container*/
.slidercon {
width: 50vw;
height: 100vh;
overflow: hidden;
float: left;
display: table;
}
.maincon {
width: 100%;
display: table-cell;
vertical-align: middle;
}
.imgslider {
margin: auto;
max-width: 560px;
max-height: 315px;
overflow: hidden;
position: relative;
}
.imgslider>ul {
margin: 0;
padding: 0;
display: flex;
position: relative;
top: 0;
left: 0;
transition: 0.2s;
width: 100%;
}
.imgslider>ul>li {
list-style-type: none;
min-width: 560px;
overflow: hidden;
}
.imgdiv {
width: 100%;
height: 315px;
justify-content: center;
text-align: center;
}
.imgdiv>img {
width: auto;
max-height: 315px;
}
.youtubevid {
display: flex;
display: -webkit-flex;
display: -ms-flex;
}
/*style for the dots*/
.dotsContainer {
text-align: center;
}
.dots {
cursor: pointer;
height: 20px;
width: 20px;
margin: 5px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dots:first-child {
background: white;
border: 1px solid grey;
;
}
/*content style*/
.content {
float: right;
width: 50vw;
height: 100vh;
overflow: hidden;
display: table;
text-align: right;
}
.innercont {
/* padding: 15px; */
direction: rtl;
display: table-cell;
vertical-align: middle;
}
.innercont>span:first-child {
font-size: 40px;
padding: 25px;
display: block;
}
.innercont>span:nth-child(2) {
padding: 25px;
font-size: 20px;
display: block;
word-wrap: break-word;
}
.price {
padding: 10px;
font-size: 22px;
}
.price>span {
margin: 0 15px;
}
.price>span:nth-child(2) {
float: left;
}
/*style for the phone number input*/
.PhoneN-section {
position: relative;
height: 50px;
margin: 15px;
}
.PhoneN-section input {
width: 100%;
height: 100%;
border-radius: 10px;
outline: none;
border: 1px solid rgb(230, 230, 230);
font-size: 20px;
padding: 10px 10px 0 10px;
text-align: left;
direction: ltr;
}
input:focus~.PhoneN-label .label-content,
input:valid~.PhoneN-label .label-content {
transform: translateY(-120%);
}
label:not([for="checkbox"]) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.label-content {
font-size: 20px;
position: absolute;
bottom: 10px;
right: 10px;
transition: all 0.3s ease;
background: white;
}
input:focus {
border: 2px solid rgb(76, 240, 0);
transition-delay: 0.2s;
}
/*style for the submit button*/
.phone-submit {
height: 50px;
margin: 15px 0;
}
.phone-submit button {
width: 100%;
height: 100%;
outline: none;
border: none;
border-radius: 10px;
color: white;
background: rgb(76, 240, 0);
cursor: pointer;
font-size: 20px;
}
/*style for the exclamation message*/
.mark {
float: right;
margin: 0 5px;
font-size: 14px;
font-weight: 600;
padding: 2px 7px;
border-radius: 50%;
border: 1px solid grey;
}
.messaget {
color: grey;
}
#media screen and (max-width: 850px) {
body {
overflow-y: auto;
}
.slidercon {
width: unset;
height: unset;
float: unset;
display: block;
}
.maincon {
display: block;
}
.content {
float: none;
width: unset;
height: 100vh;
display: block;
}
.innercont {
display: block;
}
}
#media screen and (max-width: 550px) {
.imgdiv {
justify-content: unset;
text-align: unset;
}
.imgdiv>img {
margin: 0 20%;
}
}
#media only screen and (max-width: 550px) {
.imgdiv>img {
margin: 0 10%;
}
}
#media only screen and (max-width: 420px) {
.imgdiv>img {
margin: 0 7%;
}
}
#media only screen and (max-width: 400px) {
.imgdiv>img {
margin: 0 5%;
}
}
</style>
<body>
<div class="container">
<div class="innercontainer">
<div class="slidercon">
<div class="maincon">
<div class="imgslider">
<ul>
<li>
<div class="imgdiv">
<img src="https://ewscripps.brightspotcdn.com/dims4/default/55e59a6/2147483647/strip/true/crop/1280x720+0+0/resize/1280x720!/quality/90/?url=https%3A%2F%2Fewscripps.brightspotcdn.com%2F9b%2F1c%2Fd6365aa54b5687a3cb1386a180db%2Fupdate-coronavirus-colorado-live-blog-covid19.png" alt="item">
</div>
</li>
<li>
<div class="youtubevid">
<iframe style="position:absolute;width:100%;height:100%;" src="link" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>';
</ul>
</div>
<div class="dotsContainer">
<span class="dots"></span>
<span class="dots"></span>
</div>
</div>
</div>
</div>
<div class="innercontainer">
<div class="content">
<div class="innercont">
<span>'Type'</span>
<span>'Description'</span>
<div class="price">
<span>Price</span>
<span>'1,111' ₪</span>
</div>
<form action="includes/sendPhone.php" method="POST">
<div class="PhoneN-section">
<input type="text" name="PhoneN" autocomplete="off" required />
<input type="hidden" name="itemid" value="id" />
<input type="hidden" name="itemtype" value="TYPE" />
<input type="hidden" name="price" value="1,111" />
<label for="PhoneN" class="PhoneN-label">
<span class="label-content">Phone Number</span>
</label>
<div class="phone-submit">
<button type="submit" name="phone-submit">SEND</button>
</div>
<span>
<span class="mark">!</span>
<span class="messaget">BLa lbla bla bla bla bla bla bla bla blab la</span>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Else you can use various bootstrap frameworks to simplify your styling

Answer 2

The reason is max-width: 560px; in .imgslider class. I have added 50vw then it is working fine.
.imgslider {
margin: auto;
max-width: 50vh; /* updated */
max-height: 315px;
overflow: hidden;
position: relative;
}
Try below, It is working...
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
font-family: 'Heebo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 72px 0 0 0;
overflow: hidden;
}
/*style for the slider container*/
.slidercon {
width: 50vw;
height: 100vh;
overflow: hidden;
float: left;
display: table;
}
.maincon {
width: 100%;
display: table-cell;
vertical-align: middle;
}
.imgslider {
margin: auto;
max-width: 50vh; /* updated line */
max-height: 315px;
overflow: hidden;
position: relative;
}
.imgslider > ul {
margin: 0;
padding: 0;
display: flex;
position: relative;
top: 0;
left: 0;
transition: 0.2s;
width: 100%;
}
.imgslider > ul > li {
list-style-type: none;
min-width: 560px;
overflow: hidden;
}
.imgdiv {
width: 100%;
height: 315px;
justify-content: center;
text-align: center;
}
.imgdiv > img {
width: auto;
max-height: 315px;
}
.youtubevid {
display: flex;
display: -webkit-flex;
display: -ms-flex;
}
/*style for the dots*/
.dotsContainer {
text-align: center;
}
.dots {
cursor: pointer;
height: 20px;
width: 20px;
margin: 5px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dots:first-child {
background: white;
border: 1px solid grey;;
}
/*content style*/
.content {
float: right;
width: 50vw;
height: 100vh;
overflow: hidden;
display: table;
text-align: right;
}
.innercont {
/* padding: 15px; */
direction: rtl;
display: table-cell;
vertical-align: middle;
}
.innercont > span:first-child {
font-size: 40px;
padding: 25px;
display: block;
}
.innercont > span:nth-child(2) {
padding: 25px;
font-size: 20px;
display: block;
word-wrap: break-word;
}
.price {
padding: 10px;
font-size: 22px;
}
.price > span {
margin: 0 15px;
}
.price > span:nth-child(2) {
float: left;
}
/*style for the phone number input*/
.PhoneN-section {
position: relative;
height: 50px;
margin: 15px;
}
.PhoneN-section input {
width: 100%;
height: 100%;
border-radius: 10px;
outline: none;
border: 1px solid rgb(230, 230, 230);
font-size: 20px;
padding: 10px 10px 0 10px;
text-align: left;
direction: ltr;
}
input:focus ~ .PhoneN-label .label-content,
input:valid ~ .PhoneN-label .label-content {
transform: translateY(-120%);
}
label:not([for="checkbox"]) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.label-content {
font-size: 20px;
position: absolute;
bottom: 10px;
right: 10px;
transition: all 0.3s ease;
background: white;
}
input:focus {
border: 2px solid rgb(76, 240, 0);
transition-delay: 0.2s;
}
/*style for the submit button*/
.phone-submit {
height: 50px;
margin: 15px 0;
}
.phone-submit button {
width: 100%;
height: 100%;
outline: none;
border: none;
border-radius: 10px;
color: white;
background: rgb(76, 240, 0);
cursor: pointer;
font-size: 20px;
}
/*style for the exclamation message*/
.mark {
float: right;
margin: 0 5px;
font-size: 14px;
font-weight: 600;
padding: 2px 7px;
border-radius: 50%;
border: 1px solid grey;
}
.messaget {
color: grey;
}
#media screen and (max-width: 850px) {
body {
overflow-y: auto;
}
.slidercon {
width: unset;
height: unset;
float: unset;
display: block;
}
.maincon {
display: block;
}
.content {
float: none;
width: unset;
height: 100vh;
display: block;
}
.innercont {
display: block;
}
}
#media screen and (max-width: 550px) {
.imgdiv {
justify-content: unset;
text-align: unset;
}
.imgdiv > img {
margin: 0 20%;
}
}
#media only screen and (max-width: 550px) {
.imgdiv > img {
margin: 0 10%;
}
}
#media only screen and (max-width: 420px) {
.imgdiv > img {
margin: 0 7%;
}
}
#media only screen and (max-width: 400px) {
.imgdiv > img {
margin: 0 5%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack Overflow</title>
<link rel="stylesheet" href="./styles.css">
</head>
<html>
<body>
<div class="slidercon">
<div class="maincon">
<div class="imgslider">
<ul>
<li>
<div class="imgdiv">
<img src="img" alt="item">
</div>
</li>
<li>
<div class="youtubevid">
<iframe style="position:absolute;width:100%;height:100%;" src="link" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</li>
</ul>
</div>
<div class="dotsContainer">
<span class="dots"></span>
<span class="dots"></span>
</div>
</div>
</div>
<div class="content">
<div class="innercont">
<span>'Type'</span>
<span>'Description'</span>
<div class="price">
<span>Price</span>
<span>'1,111' ₪</span>
</div>
<form action="includes/sendPhone.php" method="POST">
<div class="PhoneN-section">
<input type="text" name="PhoneN" autocomplete="off" required/>
<input type="hidden" name="itemid" value="id"/>
<input type="hidden" name="itemtype" value="TYPE"/>
<input type="hidden" name="price" value="1,111"/>
<label class="PhoneN-label">
<span class="label-content">Phone Number</span>
</label>
<div class="phone-submit">
<button type="submit" name="phone-submit">SEND</button>
</div>
<span>
<span class="mark">!</span>
<span class="messaget">BLa lbla bla bla bla bla bla bla bla blab la</span>
</span>
</div>
</form>
</div>
</div>
</body>
</html>
</html>