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

Donald Symmons 2,856

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>

Accepted answer

QiYou-MSFT 4,306 Microsoft Vendor

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.

Donald Symmons 2,856 Reputation points

2023-03-08T10:53:55.78+00:00

From your html, you have two div tags set to right and left respectively, but in mine, the right and left divs are putput in a row, in a parent div. When I set the left div position to absolute, it changes the position of the left div.
QiYou-MSFT 4,306 Reputation points Microsoft Vendor

2023-03-09T09:15:50.0966667+00:00

Hi @Donald Symmons

The example I gave is also the right and left divs are putput in a row, in a parent div.To give you clearer examples, I've condensed everything.

In fact, you just need to set a media method to modify the <div>CSS style on the left when you shrink the window to a certain value.

If you still have questions, please leave a message below. I will continue to modify the code you gave.

Best Regards

Qi You
Donald Symmons 2,856 Reputation points

2023-03-09T15:29:09.4+00:00

I will continue to modify the code you gave.

Okay

QiYou-MSFT 4,306 Microsoft Vendor

Hi @Donald Symmons

First of all, I put together your 'style'.

<style>
        .wrap {
            background-repeat: no-repeat;
            height: 100%;
            background-position: center;
            background-size: cover;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        .subottom {
            width: 100%;
            margin: 0 auto;
            margin-bottom: 80px;
        }
        .row col-sm-11 {
            width: 100%;
            margin: 0 auto;
            padding: 6px;
        }
        .col-sm-7 {
            width: 100%;
            margin: 0 auto;
            padding: 5px;
            margin-bottom: 6%;
            margin-top: 6%;
        }
        .left {
            width: 450px;
            height: 350px;
            margin-top: 5%;
            font-size: 5.2vmin;
            vertical-align: baseline;
            letter-spacing: 0px;
            word-spacing: 1px;
            text-align: start;
            position: absolute;
        }
        .leftspan1 {
            color: #145c7c;
            font-family: 'NT Wagner', sans-serif;
        }
        .leftspan2 {
            color: #000000;
            font-family: 'NT Wagner', sans-serif;
        }
        .right {
            width: 450px;
            height: 350px;
            background-image: url('img32.jpg');
            background-size:contain;
            float: right;
        }
    </style>

Next, I changed the 'style' of your left and right 'div' so that they can be in the same 'row'. Finally, set the properties of the background image so that it can contain the text on the right.

<form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrap">
            <div class="subbottom">
                <div class="row col-sm-11">
                    <div class="left">
                        <span class="leftspan1">A good way</span>
                        <span class="leftspan2">to start learning</span>
                    </div>
                    <div class="right"></div>
                </div>
            </div>
        </div>
    </form>

Test2

Best Regards

Qi You

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

0 additional answers