Responsive design on Iphone and Safari

Hi Ricardo:

You're going to have to fine tune a lot of your styles, and dig deep to see where some of your styles are coming from. For example, when the browser goes below 400px or so, the form in your footer has no room to fill out the container. Your form element has inline styles that really aren't necessary, that are stuck at 50% width, so even if your inputs are set at 100%, they are only going to fill up half the screen. Important! tags in your regular stylesheet will not override inline styles. Google "CSS Specificity" and you will learn more about how this works. Nicole Sullivan gives a really good talk about this somewhere on Vimeo.

The sad truth is that even boilerplate sets like Skeleton, Foundation, etc are not the final step of responsive design. You have to investigate where your CSS is going wrong. I use Chrome Developer Tools > [rightclick] Inspect Element to see the HTML and CSS tree and diagnose a lot.

For 320px and below, I usually just set all the parent elements to width: 100% -

In a few places, this isn't happening in your site. Good luck!

Many thanks for your response John, what I don't understand is that it works perfectly in Chrome and Firefox, but have problems in Safari. I will check it. Many thanks and regards! I'm a newbie so it's normal to find this kind of troubles.

Hey John! you were right! it does not work for 320 px and below! I will check it! many thanks!!!

No problem, Ricardo. I wish there was easier solution, but you will have to debug the CSS and use more specific media queries.

Yes, John, many thanks for your advices. I will check the video tutorials here and those you recommended me in the previous comment. As ever, the client wanted the job done ASAP, so I used Skeleton, but I need to improve my skills on website developing. It's just an issue of practice, practice and practice. And a good guidance of course: this website is quite useful, I hope there will be more PHP tutorials in the near future. again, thanks!!!!...

Hi John, just one last question. I solved the issue concerning responsive design but I can not get the answer for one problem: the navigation menu: it works perfectly in Firefox and Chrome, but not in Safari. I was testing it with ResponsiveResize Toolbar in safari and Dimensions on Chrome, and it did well on Chrome but not in Safari. I have been reading that safari does not render the font as other browsers does. Could you give me any clue to solve this problem? I have been trying anything with tutorials but without success. Many thanks. The Footer is not a problem because in mobile devices the client doest want it displayed and she likes the way it is right now. The problem is the menu in Safari. Please check the responsiveness in Safari and Chrome, http://www.pruebas.ricardogranda.com Many thanks and regards!

I saw what was happening in Safari, not sure if that's a bug, I just think the font renders a little thinner in Safari. You might want to increase the margin-left on <li id="menu-item-369"> by about 5% on the large resolution. On the tablet size, reduce that margin. You might want to balance the navigation items on the left side, just add a little margin-right on <li id="menu-item-402">

I guess that's why we test in all the browsers.

For me it looked fine on iPhone, it only looked wrong in desktop Safari.

Thanks John, I think I already solved the issue. You were right, I had to fine tune the skeleton theme to adapt its responsiveness to my design. Next time I will make my own Wordpress template. Or I'll look some other possibilities.

many thanks and regards, R.

Glad to see that you figured out your site, Ricardo Granda. Your site looks really good.