Responsive positioning of elements

[infinitezahoor]

I have 3 questions:

Question 1. Why i see the gap shown by red arrows in picture below between repeating group rows and how can i fix it…???
Link: https://classified.bubbleapps.io/version-test?debug_mode=true
Link: https://bubble.io/page?type=page&name=index&id=classified&tab=tabs-1

Question 2. I have hiding rule on image3 as shown below:
Link: https://bubble.io/page?type=page&name=index&id=classified&tab=tabs-1

Now when the image3 will be hidden, there is empty space available as shown below (yellow highlighted):

I want rest of the 2 pictures to strech in this space, how can i do this.

Question 3: After the images are shrinked due to reduction is page width, how can i keep the images in the center of the repeating group cell vertically…???

[infinitezahoor]

Anyone can help me on this please…???

[fayewatson]

Hi Zahoor I think the app is set to private right now. Can you change it to everyone can view or edit?

[infinitezahoor]

@fayewatson How can i do this

[fayewatson]

If you go to the Settings tab on the left side, then select:

[infinitezahoor]

@fayewatson Ok I changed to everyone can view, please check for me now.

[fayewatson]

Ok great

For Question 1, the space is there because the text element at the top expands in preview mode to show the Price and Location texts:

If you expand the text element in the editor to show those texts, then it will display the same way in the editor as it does in preview mode. Also, I would put the image on the left side to be inside the main repeating group (instead of in its own repeating group).

For Question 2, I would increase the minimum width of the images to around 80. When I preview the app, the two images do become slightly larger when the third image is hidden. However, it will be more noticeable if you increase the picture’s minimum width (you may have to adjust when the third image is hidden as a result)

Question 3: Place those images in their own group, and then set the responsive settings to have middle alignment, and set the images to have middle alignment. Then set the minimum width for the group to be the same percentage that the images are with no max width. This should help for mobile.