Create dynamic box using div - php

Question

I am unable to convert this code into dynamic. how to adjust width of div so that it adjust dynamically. When we use any device like mobile desktop tablet or any other device it should display same. when we resize it it does not change appearance. I adjusted width using percentage but it not work properly.
<div class="bubble1" style="background: rgb(255, 255, 255); border-radius:
10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family:
Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position:
relative; width: 650px; z-index: 9;">
<div class="rectangle" style="background: rgb(127, 157, 185); box-shadow:
rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px;
position: relative; top: 30px; width: 680px; z-index: 10;">
<h2 style="color: white; font-size: 30px; font-style: italic; font-
weight:
normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px;
text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
abash</h2>
</div>
<div class="triangle-l" style="border-color: transparent rgb(125, 144, 163)
transparent transparent; border-style: solid; border-width: 15px; height:
0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
</div>
<div class="triangle-r" style="border-color: transparent transparent
transparent rgb(125, 144, 163); border-style: solid; border-width: 15px;
height: 0px; left: 650px; position: relative; top: 35px; width: 0px; z-
index: -1;">
</div>
<div class="info" style="color: #999999; padding: 60px 25px 35px;">
<div id="inf303">
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Meaning</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
शर्मिंदा करना, Cause to feel embarrassed</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Key</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Link</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Synonyms</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
Embarrass, shame, disconcert, confound, awe</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Usage</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
she was not <span style="background-attachment: initial; background-
clip: initial; background-image: initial; background-origin: initial;
background-position: initial; background-repeat: initial; background-size:
initial; border: none; color: #333333; padding: 0px
2px;">abashed</span> at being caught</div>
</div>
</div>
</div>

Answer 1

Not a good practice to inline-style everything in your HTML.
You can use media-query that below 680px screen size, your div will take whole width of the container.
.bubble1 {
width: 650px;
}
.rectangle {
width: 680px;
}
.triangle-r {
left: 650px;
}
#media only screen and (max-width: 680px) {
.bubble1 {
width: 100%;
}
.rectangle {
width: 110%;
}
.triangle-r {
left: 100%;
}
}
<div class="bubble1" style="background: rgb(255, 255, 255); border-radius:
10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family:
Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position:
relative; z-index: 9;">
<div class="rectangle" style="background: rgb(127, 157, 185); box-shadow:
rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px;
position: relative; top: 30px; z-index: 10;">
<h2 style="color: white; font-size: 30px; font-style: italic; font-
weight:
normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px;
text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
abash</h2>
</div>
<div class="triangle-l" style="border-color: transparent rgb(125, 144, 163)
transparent transparent; border-style: solid; border-width: 15px; height:
0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
</div>
<div class="triangle-r" style="border-color: transparent transparent
transparent rgb(125, 144, 163); border-style: solid; border-width: 15px;
height: 0px; position: relative; top: 35px; width: 0px; z-
index: -1;">
</div>
<div class="info" style="color: #999999; padding: 60px 25px 35px;">
<div id="inf303">
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Meaning</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
शर्मिंदा करना, Cause to feel embarrassed</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Key</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Link</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Synonyms</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
Embarrass, shame, disconcert, confound, awe</div>
<div class="val" style="background: url("/newindex/grad.png") no-
repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px;
padding: 5px; width: 480px;">
<strong>Usage</strong></div>
<div class="val1" style="font-size: 16px; margin-bottom: 10px;">
she was not <span style="background-attachment: initial; background-
clip: initial; background-image: initial; background-origin: initial;
background-position: initial; background-repeat: initial; background-size:
initial; border: none; color: #333333; padding: 0px
2px;">abashed</span> at being caught</div>
</div>
</div>
</div>

Answer 2

You could trying setting the width of the div using the vw unit. vw sets the the width of an element in relation to the viewport width. Theres also vh for viewport height.
Example:
width = 50vw;
This sets the width of the element to 50% of the viewport width. Therefore, the width of your div would be dynamically set to fit various screen sizes.

Answer 3

<div style="border: 1px solid red; padding: 15px; min-width:100px; display: inline-block height: fit-content">
test text
</div>
Try This.

Answer 4

To make the page responsive with css you can use the #media only screen property. Media queries allow you to change the style of an element as you prefer for different devices and screen sizes :
#media only screen and (max-width: 400px) //Only apply the following styles for screen sizes than do not exceed a maximum width of 400px.
{
div
{
//Add styles here for all div elements, to be applied only on screen sizes less than 400px wide.
}
body
{
//Add styles here for the document body, to be applied only on screen sizes less than 400px wide.
}
}
Div and body style will be applied only on screens with a width less than 400px.
You can set as many media queries as you want to make your website responsive across all devices.