How do I make my div tag move down in mobile screen?

Question

How do I make my div tag move down in mobile screen?

Donald Symmons 3,066

I have a div tag that displays texts a bit at the top of the laptop screen; I want to have this div tag or the texts inside of it to move down a bit when in mobile screen. I tried using "@MEDIA " css property but it did not work. Please can anybody help me out?

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />  
  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />  
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
  
     <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />  
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />  
    <title></title>  
    <style type="text/css">  
         @media only screen and (max-width: 960px) {  
            .col-sm-9 {  
                margin-top: 30%;  
            }  
        }  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <div class="row col-sm-12" id="hidder" style="width: 100%; margin: 0 auto; padding: 4px;">  
                <div class="col-sm-9" id="headline" style="width: 100%; margin: 0 auto; padding: 10px; margin-top: 10%; margin-bottom: 5%;">  
                    <span style="color: #145c7c; font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 11.2vmin;">Healthy Living Brochure</span>&nbsp;&nbsp;&nbsp;  
                         <span style="color: #000000; font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 11.2vmin;">for every Human</span>  
                    <br />  
                    <p id="" style="top: 13%; color: #011b33; font-family: 'Poppins', sans-serif; font-size: 13pt;">Created for everybody who desires to stay physically fit everytime.</p>  
                    <br />  
                </div>  
                <div class="col-sm-3" style="width: 100%; margin: 0 auto; padding: 3px; margin-top: 12%; margin-bottom: 5%;"></div>  
            </div>  
        </div>  
    </form>  
</body>  
</html>

Accepted answer

0 additional answers

Your answer

Answer 1

Hi @Donald Symmons ,
You can try the following code:

 @media only screen and (max-width: 960px) {  
             .col-sm-9 {  
                 position: fixed;  
                 bottom: 0;  
             }  
         }

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

How do I make my div tag move down in mobile screen?

0 additional answers

Your answer