-1

So I couldn't find an answer on here pertaining to my specific problem but I just finished my first ever professional site using chrome. Made it responsive. Looks good for smaller devices. But when I put it online(view here) and viewed it on my Iphone 6s using chrome. It has so many errors. Here's just a few examples.

Button is being pushed out of parent div as well as input styles have changed https://i.stack.imgur.com/du1YS.jpg

Button color has changed and and the my underlines have shifted. But again it looks good on mobile in my dekstop?? https://i.stack.imgur.com/z4DMK.jpg

input elements are shown larger here https://i.stack.imgur.com/vitQ2.jpg

image is really distorted here https://i.stack.imgur.com/dd5oL.jpg

here's my github https://github.com/spabsa/kaneConcrete

Alfred
  • 245
  • 1
  • 2
  • 13
  • Questions asking to debug issues in code need to include a [MCVE] in the question itself, otherwise the question is [off-topic (#1)](/help/on-topic). – zzzzBov May 31 '19 at 17:15
  • Even though phones now commonly have 2k screens that doesnt mean it will or should behave anything like a 27inch 2k screen. Read up on device pixel ratio. – GifCo May 31 '19 at 17:31
  • Can you guys just point me in a direction? So I can figure it out myself. I'm new to web development and can't think of any minimal reproductive examples to give you. Do you not understand my problem?. – Alfred May 31 '19 at 20:12

1 Answers1

1

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."

Remigio Arenas
  • 71
  • 5
  • Thank you!!! couple more questions though. 1. What is webkit? I've seen this all over the place but never learned about it(I'm self taught) 2.what about the images there all blurry? As well as the position of the underlines in the footer, how would I fix that?? – Alfred May 31 '19 at 20:07
  • Also How do I change the look of the inputs so there not rounded and have that box shadow like my desktop version – Alfred May 31 '19 at 20:14
  • You can change the way the inputs look in iPhone using -webkit-appearance: none; [check this answer](https://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs/14758383) for more info. I have a hard time checking out the code, I don't have an iPhone to reproduce the error. For the position maybe try adding height: -webkit-fill-available; to .quote-info form. – Remigio Arenas May 31 '19 at 21:02
  • Adding webkit-appearance: none; adds a top and left border to the inputs on my desktop?? Do i need to add that css to the media queries instead of adding it to the top of my style sheet? – Alfred May 31 '19 at 23:01
  • Also height: -webkit-fill-available; seems to not be code or something else is wrong https://imgur.com/a/nZqEZjO – Alfred May 31 '19 at 23:06