CODEWITHSUNDEEP
htmlcss
GAURAV SHARMA
GAURAV SHARMA

Reputation: 340

I want to remove box for mobile view

This is the html file:

            <div className={styles.box}>
                <div className={styles.video}>
                    <video poster="/gif/something.gif" controls width="100%" height="400">
                        <source src="/video/something.mp4" type="video/mp4"></source>
                        I'm sorry; your browser doesn't support HTML5 video.
                    </video>
                </div>
            </div>

This is the css for it:

.video{
    display: block;
}

@media (max-width: 767px) {
    .box{
        display: none;
    }
}

.box {
    margin: auto;
    width: 85%;
    height: 90%;
    border: 50px solid white;
    box-sizing: border-box;
    shape-outside: border-box;
    box-shadow: 30px 30px #7493DC;;
    border-radius: 50px;
    display: block;

}

What I want is that after a certain pixel, I want the video stay but the box should be removed, so the video can take the entire screen.

Upvotes: 0

Views: 365

Answers (2)

Rayees AC
Rayees AC

Reputation: 4659

Please try this,

.box {
    margin: auto;
    width: 85%;
    height: 90%;
    border: 50px solid white;
    box-sizing: border-box;
    shape-outside: border-box;
    box-shadow: 30px 30px #7493DC;;
    border-radius: 50px;
    display: block;

}
.video{
    display: block;
}

@media (max-width: 767px) {
    .box{
        margin:0;
        border:0;
        box-shadow:none;
    }
}
<p>Take screen more than 767px to view the box div</p>
 <div class="box">
     <div class="video">
         <video  autoplay muted loop  controls width="100%" height="400">
         
         <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
         
         I'm sorry; your browser doesn't support HTML5 video.
         </video>
     </div>
 </div>

Upvotes: 1

gpl
gpl

Reputation: 1470

Add this to your CSS

@media only screen and (max-width: 600px) {
  .box  {
    display: none;
  }
}

This media rule apply to only screen whose width is less than 600px (most mobile display width < 600px). You can alter this screen-width limit according to your needs. Inside the rule we are setting display: none; for the box class which will hide the box.

Upvotes: 0

Related Questions