This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(313.6, 90%, 40%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EB%3C/text%3E%3C/svg%3E)
I have created bootstrap carousel with image on it. Also I have a rounded textbox with some text position on the bottom right of the Image. It works fine on a full web page but now I want the textbox to move to bottom of the the carousel image when the page resizes to smaller scale using css and media query
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(153.6, 92%, 24%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
Hello @Benjoe , You'd added azure-webapps tag, which is dedicated for questions specific to Azure App Service WebApps. To receive insights from the targetted SMEs/community I have added additional tags.
Please do try the suggestions shared by MichaelHan-MSFT and keep the community posted.
If you're leveraging Azure WebApps and have specific questions, kindly let us know with more details on it.
Hi Mike,
I I have fixed it myself using media query to resize it. It is so unfortunate the asp.net mvc forum is no more. It was a perfect place to get help easily on asp.net mvc issues. This new environment is not helping. I couldn't even add html css code to my post. Finding it difficult to create tags so I have to pickup any tag which shows up
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(67.2, 7.000000000000001%, 16%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EMM%3C/text%3E%3C/svg%3E)
Hi @Benjoe ,
Glad that you fixed it. Thanks for the sharing. I have converted you comment to an answer, you could accept it via the "Accept Answer" button to close this thread.
For asp.net related questions, you could choose the tags here: https://learn.microsoft.com/en-us/answers/products/dotnet.
And the tag for asp.net mvc is called dotnet-aspnet-mvc : https://learn.microsoft.com/en-us/answers/topics/dotnet-aspnet-mvc.html
Hi @Benjoe ,
You could set up the event handler using the addEventListener() method on windw resize event. When the resize event fires, use js code to mvoe the textbox to bottom.
You could refer to this article : Window: resize event
If an Answer is helpful, please click "Accept Answer" and upvote it.
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.