[Pro] breakpoint sizes not accurate

Freeway
1

Hi,

I’m currently working on my first responsive sight, and have just uploaded it so I can check whether it works or not. I have the best fit I can obtain on numerous breakpoints, and I constantly checked it using the preview option, and viewing it in Safari and Chrome under the preview in browser option. It was produced in Freeway Pro 7.1.3 on an iMac running on High Sierra latest version.

Unfortunately, upon uploading it I’m looking at a dog’s dinner, where nothing fits. At the default size of 1200 pixels wide it works fine. On smaller sizes, I’m checking it on an iPad air and iPhones 4, 5 and 6, it’s dreadful. I can’t even get the pages to fill the screen width, so everything is too small.

Some graphics have been hidden on smaller sizes as there isn’t room to display them, but I’m wondering if Safari still thinks they are there, as I didn’t move them and they are now off screen?

My site is www.visionexcess.org.uk. Only the home page and biography pages are working at present, I have screenshots if anyone wants to see them.

All images are png, pass throughs, and set as width: fixed%, height: flexible.

I’m very puzzled by this, and can’t really proceed without knowing more, so if anyone can offer any advice I would be most grateful.

Oddly, although I has a very good fit on all the Biography pages in preview, now I have uploaded it, the fit is not quite so good on screen now.

A further problem, is that I’m using a font called Anton set up as an html font for the headings. On iPads and iPhones It’s fine on the home page, but the biography page has lost the font. I don’t get that either.

www.visonexcess.og.uk

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

A further note on my post. I tried moving the unpublished images within the page area on narrow width, and republished. Sadly, it made no difference. On a phone, the right hand half of the screen remains empty. I can find no reason at all. Has anyone else experienced this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Hi Steve

From what I can see you have a number of items with a fixed width. For a truly responsive website they should all be percentages and everything should change dynamically regardless of breakpoints.

Open your website in Safari on a desktop. Make sure the window is wide enough to see the full width of your website. Now slowly narrow down the width of the browser window. As soon as you go to a size less than 1200px the bottom scroll bar appears. This indicates item(s) of fixed width which need to be looked at. Your aim should be for the horizontal scroll bar never to appear.

At a width of around 790px all your header text ends up as a jumbled mess moving over other elements. This seems to indicate you aren’t using an inflow design so that as elements are resized the allow other elements to be pushed down or move up to keep the spacing the same.

Have a look at http://www.taybus.co.uk/ and use the same ‘trick’ of widening and narrowing the Safari browser window. Notice how the text font size subtly changes at 1000px and the layout changes only once at around 760px. Other than that everything stays the same. By using a truly responsive inflow design you only need to define breakpoint changes that suit your layout, not the whole range of devices you think visitors may be using.

All the best

Gordon
http://www.gordonlow.net/

On 29 Dec 2017, at 11:28am, Steve Fermor email@hidden wrote:

A further note on my post. I tried moving the unpublished images within the page area on narrow width, and republished. Sadly, it made no difference. On a phone, the right hand half of the screen remains empty. I can find no reason at all. Has anyone else experienced this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Hi, Can anyone help me with a page size problem. I’ve got five sets of breakpoints, 320 275 414 768 and default. The problem is the phone size pages are allowing the screen to move to the right to the whole of the blank pages where I have items for the tablet and default sizes. The items are all set to non display however the phone size pages are still sensing the full size page (even tho the items are not visible). Is there a way to fix the screen size pages so the bottom scroll bar doesn’t show and ther fore not allowing the scroll over to the right side? The images are showing correctly within the phone screen, it’s just if you left swipe on the page by accident it all moves over to a blank screen. I assumed if the items were set to non display the smaller breakpoints wouldn’t still recognise that area of the page? When you look general website on your phone the scroll is only up and down? Hope this makes sense!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Oops sorry Steve I posted my question as a reply to you by mistake! Sorry!

freewaytalk mailing list
email@hidden
Update your subscriptions at: