Site Doesn't Look Right in Mobile Browser

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



Leave a reply



Submit