If you want to check out the issue, follow this link to my code: https://jsfiddle.net/0sbcdfLk/2/
Currently, I am utilizing a responsive login form template from Bootstrap. For my logged-in screen design, I have duplicated the formContent section of the code. Now, I have two containers, but I need the second container to be aligned normally on the left and directly below on mobile devices.
Trying to align it using margin messes up the design on mobile screens. Any suggestions for best practices in responsive design? This is the exact Bootstrap template that I'm working with:
I have replicated this portion of the code:
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="https://www.b-cube.in/wp-content/uploads/2014/05/aditya-300x177.jpg" id="icon" alt="User Icon" />
<h1>Aditya News</h1>
</div>
<!-- Login Form -->
<form>
<input type="text" id="login" class="fadeIn second" name="login" placeholder="username">
<input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Password -->
<div id="formFooter">
<a class="underlineHover" href="#">Go to the Site</a>
</div>
For the bottom one, I tried adding a style with margin: -50% 0px -6px -95%, which worked well on PC, but on mobile devices it appears half off the screen, overlapping the first form.