My buttons are oversized on the iPhone

Not sure what I’m doing wrong — or if this is a problem that I just encountered or if I’ve had it for the past month but didn’t notice it.

The buttons I’ve created in Sparkle look good in Sparkle, and they look good on the laptop browser and iPad when I visit the published site. But the buttons on the iPhone are super-sized and not right.

Here you can see the buttons in Sparkle.

But when I publish, here’s what they look like on the iPhone (both in portrait and in landscape mode):

Does anyone have any advice?

@chuckbo, have you left it up to Sparkle to create the mobile device, aka “automatically scale”? If you have you will need to go in and adjust the buttons and their font size.

The other thing is that you haven’t created your mobile device?
If that is the case you need to introduce a mobile device and then adjust the layout, images, and font size.

Yes, I’ve let Sparkle do the automatic scaling, and everything had looked good (I thought).
I’m trying to avoid having to constantly edit about 60 buttons spread out over 2 dozen pages for the phone landscape and portrait.(And also for the iPad portrait option I now discovered.) But it sounds like that will be the only option.

But I don’t understand your comment about introducing a mobile device. My devices menu shows the five default sizes.

Are you saying there’s something else I can do here that might make a difference?

I’m just surprised by this behavior of the scaling. The buttons are smaller and consistent with the size of the preceding textboxes in Sparkle and on the PC pages. But on the phone, the textboxes are scaled nicely but the button images have exploded.


No offense, but in my opinion this is the worst setting you can make.

Please keep in mind that a PC screen is landscape and a smartphone is vertical. The conflicts in the layout are pre-programmed.

Which layouts to personalize, make automatically or not use, has been discussed very often here. There is no generally valid solution.

One possibility is the - I call it - Greenskin method:
1200 px: pers.
960 px: n/a
768 px: pers.
480 px: n/a
320 px: pers.

You have to edit three layouts per page, but you will get a nearly perfect image on most devices.

And maybe my method:
1200 px: auto
960 px: pers.
768 px: auto
480 px: n/a
320 px: pers.

You only have to edit two layouts per page, but you have to watch the font sizes! But the result is acceptable.

Good luck and success with the conversion.

Mr. F.

@chuckbo, I see what you have done now and totally understand why your issue…

There is many ways to go about this but like @Mr_Fozzie mentions that there is a far better way than only working on the one device and scaling everything else. Sparkle allows total control over every device but of course there is a bit more work to be done

Please take @Mr_Fozzie advice regarding the devices (aka breakpoints) and you’ll have a great result! :slight_smile:

Let me summarize to see if I understand correctly.

You create the landscape view for the landscape tablet.
You let Sparkle generate the view for the wide-screen PC and the landscape phone and the portrait tablet.
And you create the portrait view for the phone.

I’m guessing the portrait view for the tablet is generated from the portrait phone and the landscape view for the phone and landscape view for the PC are generated from the landscape tablet?

Yes you are on the right track…
From my experience there is no real need for the 480 device. For the majority Users only use their phone in landscape when viewing video.

So of late I have been having fun with the following that works quite well for me…

  • Create 1200 device, and “Automatically Scaled” 960, 768, 480, 320.
  • Then I “Not Present” 960 and 480
  • Then I covert to “Custom Layout” the 320

So the 1200 also controls the 769, and the 320 I go in and fine tune for the breakpoint, aka device.
So in other words I’m creating the desktop covering the tablet, and then separately refining for mobile.