Responsive Issue with Form on Phone

Responsive Issue with Form on Phone
0.0 0

#1

So for the most part, when I view my website: https://theonlyrealtodd.github.io on my phone, it’s pretty responsive. However, if I focus in a form field/start to fill out the form, it pretty much breaks the page. Does anyone know why this is? No, it’s not on CodePen but it’s on GH pages which means you can still see the code here
Thanks!


#2

It pretty much doesnt’ look responsive either.


#3

Regarding the issue which you are facing :
The font-size of the field/text-boxes should be equal to the base font size of your page. By default its’ value is 16px. Setting the font size of the fields/text-boxes to 16 px would solve your problem .


#4

It’s not responsive for me even without touching the form. The nav bar might be the issue since it stretches way beyond your body. Use the bootstrap one or don’t use absolute values?


#5

Also looking into the DOM structure , you have a class .portfolioRow which is making your making your UI go wrong. It is having a .row class which should be replaced by .container so that you can limit the blocks to not grow beyond the page width.


#6

Thanks, will get to work with this!


#7

Your form is a bit small on my mobile, but it actually is responsive. You do have some other issues though:

  • Your <hr> elements have a fixed with of 800 pixels. On any device smaller than 800px they are causing a scrollbar. Better to use max-width here.
  • Your images are also too big on smaller devices. You could use Bootstrap’s img-responsive class or simply give them a max-width of 100% to solve this.
  • Better not center your images with a % of margin. It looks the way you want it to only on certain specific screen resolutions and gives you trouble in most others. You can center your images by using text-align: center on their parent.

Hope this helps!


#8

You guys were all super helpful. The only last thing that I see that’s kinda weird is somehow the background “darkening overlay” (if you will) that I have applied directly in the same CSS line/class as the background image itself somehow falls off the image on the very right side of the page if you look closely. Which is strange because the overlay is bound to the same element via CSS as the image itself, so I’m not sure how the overlay is stopping short of the image.