I am in the process of developing a Rails application. Within my app, I utilize Bootstrap's CSS for displaying flash messages on alerts. Instead of fully incorporating Bootstrap's CSS, I only integrate styles related to alerts in order to prevent conflicts with existing CSS.
The flash message styling works perfectly on the standard desktop screen, appearing centered and fixed as shown below:
https://i.sstatic.net/o93eM.png
However, when the flash message is displayed on a mobile screen (less than 500px), it consistently appears off-centered to the left regardless of adjustments made. This issue is depicted here:
https://i.sstatic.net/ZIBa7.png
My confusion lies in why this discrepancy occurs. Similar to the desktop display, I aim to maintain a consistent position for the flash message on mobile screens and have it always appear in the same location.
Below is the view code responsible for rendering the flash messages:
<div id="flash-message-wrapper">
<% flash.each do |type, message| %>
<div class="alert <%= alert_class_for(type) %> alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<%= message %>
<% end %>
</div>
The CSS code corresponding to the alert messages structure is provided below:
(CSS Code Here)Any assistance or guidance on resolving this issue would be greatly appreciated!