html - Making the webpage responsive on medium and small screen

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - Making the webpage responsive on medium and small screen

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

I am using Bootstrap 4. This is how my webpage looks like on a large sized screen:

On a medium screen it looks like the following:

How can I change my code so that the "Lorem Ipsum" writing does not show on a medium screen and on smaller sizes?

Also, on a small sized screen, how can I change my code so that the text "Carlos Qiano" have equal spacing at the top and bottom:

Here is my HTML and CSS code that needs to be modified:

<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <style type="text/css">
    /*body{
    margin-top: 53px;
    }*/

    .jumbotron {
    background-image: url("background1.jpg");
    text-align: center;
    height:522px;
    background-size: cover;
    }

   </style>

   <body>                 
    <section id="page-top">
            <div class="jumbotron">
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Carlos Qiano</p>
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:black;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-md-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
            </div>
        </section>
   </body>
</html>

question from:https://stackoverflow.com/questions/65623057/making-the-webpage-responsive-on-medium-and-small-screen

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

124 views

1 Answer

深蓝 · Answer 1 · 2021-10-06T18:53:56+0000

Please find the below sample code. That should meet your requirement.

.jumbotron {
    height: 100vh;
    background-image: url("background1.jpg");
    text-align: center;
    background-size: cover;
    margin:0 !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.mainText {
    width: 100%;
    font-family: Verdana,sans-serif;
    font-size: 120px !important;
    color: black;
    margin: 0 0 5rem 0;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-delay: 1s;
}

.subText {
    font-size: 20px;
    font-family: Georgia,serif;
    font-style:italic;
    line-height: 1.6;
    color:black;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-delay:1s;
}

@media screen and (max-width: 768px) {
  .mainText {
    margin-bottom: 0;
  }
  
  .subText {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <body>                 
    <section id="page-top">
        <div class="jumbotron">
          <p data-aos="zoom-out" data-aos-delay="500" class="lead mainText pulse green aos-init aos-animate">Carlos Qiano</p>
          <p data-aos="zoom-out" data-aos-delay="500" class="lead pulse lightGreen aos-init aos-animate d-md-block subText">Lorem Ipsum.<br>Lorem Ipsum.</p>
        </div>
    </section>
   </body>
</html>

Categories

html - Making the webpage responsive on medium and small screen

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags