The icons around the iPhone

Let’s check first if everything actually resizes to bigger devices.

Switch the Preview Window to an iPhone 8 (or 8 Plus).

The icons maintained their original position and size because they’re not yet placed in our container. Let’s solve this first.

# add icons to “container”, so that they also scale
for icon in [instagram, calendar, soundcloud, stocks, gmail, facebook, rss_feed, weather]
    icon.parent = container

With a for…in we loop through all eight icons to make each of them a child of container.

That fixes their position, but they’re now in front of the PageComponent with the iPhone and text. The icons should be behind the iPhone, except for the Instagram and Google Calendar icons, which should be in front of it.

With a few lines we can rearrange their stacking order:

# move a few things to the front
page.bringToFront()
instagram.bringToFront()
calendar.bringToFront()