Home page not responsive

HTML & CSS
, ,
1

Hi on my index page I have a background image with some writing. My problem is I’m struggling to make the writing responsive on every device. For example on ipads the heading collapses and either goes to far to the right or overlaps the menu. Is there anyway that I can make it work for every device.

my site is http://betterclimates.com/

Below is a responsives site tester and at the bottom the header collapses. I dont have any ipad so I’m struggling to test my site on every device.
http://responsive.nutsandboltsdev.com/?url=http%3A%2F%2Fbetterclimates.com%2F

Any help to make it more responsive would be much appreciated

2

Hi,

I’m afraid I can’t see the problem you describe or I;m looking in the wrong place :slight_smile:

The text seems responsive and indeed all the pages on that responsive tester seem to be ok.

Do you have a screenshot of the problem that you see as I may be looking at the wrong thing?

3

1019×536 192 KB

On SauceLab ipad

4

sorry the picture shows a different site but is exactly the same layout

5

As I said above the site you linked to in your first post looks ok on the iPad.

If it’s another site that has the problem then let’s talk about that instead :slight_smile:

6

I don’t see problem too.
I checked on some different tools and it’s ok (both addon domains): http://responsivetest.net/#u=http://betterclimates.com/|640|1136|2

Maybe you checked with some “old tool” it happened to me with internet explorer(for some other things) with early versions (under 7 or so) that do not support some CMS and other stuff.

7

To check the responsiveness of your site, you can simply view the site on a desktop or laptop and simply drag in the browser to make it smaller. Doing that with the site you gave, it looks as though it is responsive.

8

1073×575 94.7 KB

Im currently using a testing site called Sauce Lab and this is what happens to my heading on a Ipad.

9

Maybe it’s the test site that is at fault.

10

No that is a picture of an ipad simulator and not an actual ipad.

The only simulator that is 100% correct (visually) is the one from apple that comes with the Xcode sdk.

If you have a mac computer you can download the sdk and just use the simulator for testing (as I do). Your page looks fine on the simulator and looks the same on my actual ipad.

I believe that you have to have a paid account on saucelabs if you want to access real devices remotely.

As others have already said most of the time initial testing can be done on a desktop by simply opening and closing the browser window and making sure the design fits along the whole range. If not add a media query based on width and fix the element that is misplaced.

It’s always good to check on real devices but if the page is a straight forward simple page then most of the time what you see on the desktop will be close to what you get on a device.

Chrome developer tools make it a little easier to toggle device sizes just for a quick check but opening and closing the window is just as good.

1 Like
11

Ive checked the site on a few ipads, iphone devices and it worked fine like your saying. But on my friends ipad it goes wrong. What should I do if its working on most devices but not on my friends

12

Find another friend :slight_smile:

You need to find out what ipad version your friend has and what ios version it is running. If it is an old ipad that hasn’t had ios updated then it’s not worth worrying about. If it’s a newer version then we need to know which type of ipad and which ios and a screenshot of how it appears.

1 Like
13

:grinning: I like your thinking. Thanks again for your advice

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.