The iPhone version of my site doesn't work well, is there an option?

I’ve made my first Blocs website - just a rough version to try some ideas.

www.jhautomotive.co.uk

It works pretty well on my laptop and iPad, but the iPhone version is terrible - for example, the ‘social’ bloc has the four icons piled one above the other. (One snag on all versions is the ‘features’ bloc circles have rendered as ovals.)

So, is there a way of making an iPad or iPhone just use a smaller version of the desktop site?

Or is there a way of making a special optimised mobile version which will be recognised by mobile devices? (Many ‘mobile’ website versions begin with an ‘m’ as in m.xxxxx.co.uk)

Thanks.

It’s normal behaviour for lines with multiple items like the social blocs to break down for mobile devices, so there is a single item on each line. This is because it is easier for mobile users to navigate and click on items. This would be the same with any other design app producing responsive web designs.

Somebody here may well know how to make all four icons appear on one line, but I suspect they would be hard to physically click on smaller devices. You might be able to play a trick whereby you keep them at the current size on desktop or tablet but then show a different version with smaller icons on mobile using the visibility options.

Your website is already recognised by mobile devices at the normal URL. The whole point of a responsive design is that you don’t need to build a separate mobile version, which would bring all sorts of potential problems.

Thanks, but I would still like a solution!

Try the visibility options like I suggested. I am new to Blocs myself, but I think that should work.

I just tried it and it didn’t work, so it will probably require some custom coding. I am also on my first website using Blocs, so I think somebody more experienced will have to suggest how this is done.

That’s what I was hoping for!

Your best bet is @Norm

looks like a bug with the icon frames when they are set to a smaller size. It doesn’t happen in app, only when you export, I’ll get a fix in place for this for the next release. In the meantime just make the icon size medium and they should stay symmetrical. Also the image is oval because its, it needs to be a square shaped image e.g. (100x100px) in order to crop correctly and remain symmetrical.

regarding how the icons stack, this is todo with the columns, you currently cant control how columns react based on breakpoints in Blocs yet but that will be changing later this year.

“Visibility”

Doh!