Buttons and type under photos are stacked on certain device views

[designerwriter]

I do not know how to fix the Learn More buttons which are not showing up underneath the corresponding photographs. I did however, make one change. I deleted Section 3 where these Learn More buttons were originally placed in 4 separate columns and instead, I added a row in Section 2 right underneath the photographs. I thought this would solve the problem but it did not. I am also having the same problem on the Our Team page with the names of the team stacking on top of each other instead of under the photos.

The 2 devices where the Learn More button breaks are for 768x979 device and 480 & smaller devices.

How can I fix this because it looks odd not being under the photographs and we don’t want these buttons in a vertical row. See the 2 screenshots below. One more thing. The main photograph on the home page above these 4 photos isn’t resizing properly with the smaller devices. It’s getting cut off. Is there any way that I can solve this issue as well?

https://www.reactivemedical.com/

Thanks in advance!

Here are the 2 screenshots:

https://www.reactivemedical.com/wp-content/uploads/2018/03/Buttons-not-under-photos-768x979-Mar-19-2018.jpg

https://www.reactivemedical.com/wp-content/uploads/2018/03/Buttons-not-under-photos-480-smaller-Mar-19-2018.jpg

[jade]

Hi there,

This happens because you have placed the images and the button in separate row that’s why in desktop views, it looks correct but as it collapses on mobile, the top row which contains the image shows the entire row content first and the next row.

You will have to move the buttons directly below the images that is put the in the same column so that they will be displayed correctly on mobile.

As for the image sizes on mobile, they seem to look fine on my end when I checked. Try clearing your browser cache.

[designerwriter]

I wasn’t sure if I could drag the button element to the same column where the photo is. So there can be 2 elements in one column? I didn’t know that. That solution did cross my mind but I thought I would ask first before making changes. I guess I will have to do the same for the captions under the photographs because they are stacking too. I will do it tomorrow and let you know what happens. Thank you.

[jade]

Hi there,

Sure, you can add as much elements that you want in a column.

Let us know how it goes.

[designerwriter]

Success! I managed to drag the text to the bottom of each photograph. The buttons were easier to drag. I did have an issue with the first photograph where the Text element always wanted to go to the top of the photo instead of the bottom so I did it on the second, third, and fourth photo and they worked. Then I went back to the first photo and just kept trying to drag the Text element to the bottom and it finally worked. Thanks so much!

[jade]

Glad to hear that.

You’re most welcome.