How do I make two div tags in a row overlay each other when I switch to mobile view?

Donald Symmons 2,856 Reputation points
2023-03-08T03:40:53.2233333+00:00

I have two div tags in a row inside a div (one on the left and one on the right). The left div tag has texts and the right div has an image. How do I make the right div with the image in it appear on the background of the left div tag with texts, and be a bit opaque, when in mobile view. It seems that in asp.net designs, if you have two div tags I a row, the right div moves below the left div whenever you switch to mobile view.

What I mean is, currently the two div tags appear to be in the left and right positions when the page section is desktop/laptop view. Then when I switch to mobile view by minimizing the browser, the right div tag moves below the left div tag. But I want the right div tag with its image to be behind the left div tag (which has texts), when I switch to mobile view.

How can I do that please?

Here is my HTML for that page section

<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" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <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" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <title></title>
    <style>
        .wrap {
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    width: 100%;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
         <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrap">
            <div class="subbottom" style="width: 100%; margin: 0 auto; margin-bottom: 80px;">
                <br />
                <div class="row col-sm-11" style="width: 100%; margin: 0 auto; padding: 6px;">
                    <div class="col-sm-7" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 6%; margin-top: 6%;">
                        <div style="font-weight: 800; margin-top: 5%; font-size: 11.2vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 1px; text-align: start;">
                            <span style="color: #145c7c; font-family: 'NT Wagner', sans-serif;">A good way</span>
                            <span style="color: #000000; font-family: 'NT Wagner', sans-serif;">to start learning</span>
                        </div>
                        <br />
                    </div>
                    <div class="col-sm-5" style="position: relative; background-image: url('/images/head3.png'); background-size: cover; background-repeat: no-repeat; margin: 0 auto; padding: 6px; margin-top: 6%; margin-bottom: 7%;"></div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,439 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,303 questions
0 comments No comments
{count} votes

Accepted answer
  1. QiYou-MSFT 4,306 Reputation points Microsoft Vendor
    2023-03-08T09:25:41.4066667+00:00

    Hi @Donald Symmons

    You can use @media this CSS method. When the window size changes, change the CSS style of this div to implement the function.

    Code:

    <!DOCTYPE html>
         <style>
           .box{
               height:300px;
               border:1px solid #ccc;
           }
           .left{
               width:250px;
               height:150px;
               
               float:left;
               position:absolute;
           }
           .right{
               background:#ccc;
                   width:250px;
                   height:150px;
                   float:right;
           }
           @media (max-width: 501px){
        .right{
             width:250px;
               height:150px;
               
               float:left;
               position:absolute;
               
       background-image: url('img101.jpg');
                  opacity: 0.2;
        }
    }
        </style>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>   
    <body>
        <div class="box">
            <div class="left">Test</div>
            <div class="right"></div>
        </div>
    <form id="form1" runat="server">
     </form>
    </body>
    </html>
    

    Result:

    Test4

    Best regards,
    Qi You


    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.


0 additional answers

Sort by: Most helpful