Site doesn't look right in mobile browser
The viewport meta tag has resolved this kind of issue for me in the past, try adding this to your HTML header:
<meta name="viewport" content="width=device-width">
Why doesn't my website look the same on the mobile chrome browser as the desktop version of chrome at the same resolution?
For the button color just add the background color you want in the css
.footer button {
position: absolute;
right: 0;
top: -50px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
background-color: gainsboro; //or any other color
}
For the input elements try
@media screen and (max-width: 924px)
.row-2 input {
width: -webkit-fill-available;
margin-bottom: 5px;
}
"Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop." You can check more here.
"The -webkit prefix on CSS selectors are properties that only this engine is intended to process, very similar to -moz properties."
Responsive website looks different in mobile browser
The is helped the OP:
Although the mobile device has a resolution of 720x1280 the device might claim otherwise when it's width is being queried. Width of your device(in px) can be different than resolution(in px).
mobile version of website doesn't fit horizontally
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an @media
rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)
Related Topics
How to Position Element in The Correct 3D Position with CSS Perspective
CSS: Fix The Height of a Section Within a Variable Height Element
Overriding Styles in Material UI in React
Is It Possible in CSS to Transition Through a Third Color When Using a Hover Transition
How to Map CSS and Js File from Jsp File in Spring Mvc
How to Make a Wordpress Theme Full Width
P Tags Appearing Lower in Firefox Than in Internet Explorer, Using CSS
Image and Color Overlay on Hover
How to Animate an Ellipsis with CSS Animations
Change Text-Align Responsively (With Bootstrap 3)
How to Add Shimmer Effect in CSS
Card Back Hidden on First Transition in Chrome
Multiple Navbars on The Same Page with Twitter's Bootstrap 3
Difference Between These Two Style Rules
Tailwindcss Not Using My Custom Class Inside Breakpoints
How to Use CSS Sibling Select to Select a Tag with a Link That Follows a Tag with an Image