Responsive design problem

Hello guys,

I have a problem connected with the design of a website. When the latter is viewed with phones everything is okay, except iphones. With iphones there occur some bugs, below is the website opened with iphone:

But here is how it should look:

Particularly, the bugs are:

  1. design of input fields, there must have rectangular corners, but they don’t
  2. the above refers to select boxes too
  3. the circled checkboxes must not be visible, but they are. This refers to the ones under “Level” and “Solution format” labels

Hi! Just an fyi, it would be beneficial if you could post your code along with your problem, but I’ll give it a go:

  • For ios, you need to specifically set the border-radius of input controls to 0 to keep the pointed corners. Apple has their own default css styling that you need to override in this case.

  • For the checkboxes, I’m not sure how you’re styling those, but in my example below I’ve set the visibility to hidden (to hide them, obviously) and set the positioning to absolute to remove them from the flow of the document, else wise creating unnecessary spacing issues. All my visible styling for the checkboxes takes place on the included “span” element, which I’ve set as inline-block to allow block level control.

I tested this code on a free trial at browserstack and it seemed to fix the issues you have. I hope this helps!

2 Likes

Thanks, the changes worked