Learn Courses My Dashboard

Lesson 13 hstack problem

Just came across the channel and started the challenge. Doing the lesson 13 but having an issue with hstack for the fruits etc. Am attaching a screenshot with the code, not sure what am doing wrong but the icons are big and not fitting into the Hstack and the Hstack is not fitting within the screen itself. Don’t want to look at the solution stuff yet and want to see what i can figure out before i give up and look

@static360

Welcome to the community.

Immediately after each Image() add the modifiers
.resizable()
.scaledToFit()

For example:

Image("fruit1")
    .resizable()
    .scaledToFit()
    .padding()

What those modifiers do is allow the images to resize with respect to the available space from left to right and maintain their aspect ratio.

Also change your .padding modifier that is added to the HStack closing brace to simply:

.padding(.horizontal) 

This will bring the edges of the HStack in from each edge by the default value which is 16 points.

If you use a negative value it will cause the leading and trailing edges of the HStack to move in the opposite direction than you want.

Thanks. Now onto coding the button actions etc. so far the icons are disappearing every time i click spin. Will see if i can figure it out before coming back here