How can i make the row visible in small devices?-CodePudding

I have changed the margin in the row in the CSS file but it wont applied in small devices

<body style="background-color: #353839;">
    <div >
        <div >
            <div >
                <h1  style="color: white;">Cyber Cloud</h1>
            </div>
        </div>          
        <div  style="background-color: black; ">
            <div >
                <h3  style="color: white;">Join Now</h3>
                <p  style="color: white;">And Start Buying Games</p>                                        
            </div>
            <div >
                <div >
                    <input type="text" placeholder="Email"/>

                </div>
            </div>
           
        </div>
    </div>

My CSS:

.r1{


    margin-left: 500px;
    margin-right: 500px;
    

    
}

I have tried to apply bootstrap responsive CSS(added d-none d-lg-block) yet it doesn't work .

CodePudding user response：

try to use media queries in css and set the display width of a device, use developer tools to change display width to simulate a device

@media only screen and (max-width: 600px){
.r1{
margin-left: 500px;
margin-right: 500px;
}
}

hope this works

CodePudding user response：

Try this code. Bootstrap 4 and 5 give you the ability to display or not to display an element. I added d-md-none in that row you want to show in the small device, and it will not show on the wide devices.

<div >
        <div >
            <div >
                <h1  style="color: black;">Cyber Cloud</h1>
            </div>
        </div>          
        <div  style="background-color: black; ">
            <div >
                <h3  style="color: white;">Join Now</h3>
                <p  style="color: white;">And Start Buying Games</p>                                        
            </div>
            <div >
                <div >
                    <input type="text" placeholder="Email"/>

                </div>
            </div>
           
        </div>
    </div>