I have two icons and a book now button on this page. They are on the right on desktop but this does not work on mobile. They appear underneath but vertically. I set the columns and inner rows up with the correct mobile responsive settings but they refuse to sit next to each other. Eventually I got tired and created a new row that unhides when going into mobile. The new problem is that there is a white space gap where the hidden element sits. I am struggling to see what the best approach is for this design.
I should add that the problem occurs when the icons are nested on an inner row. This is necessary to have the image on the left. With the new approach the icons are in a tier one row which works for some reason.
I have two icons and a book now button on this page. They are on the right on desktop but this does not work on mobile. They appear underneath but vertically. I set the columns and inner rows up with the correct mobile responsive settings but they refuse to sit next to each other. Eventually I got tired and created a new row that unhides when going into mobile. The new problem is that there is a white space gap where the hidden element sits. I am struggling to see what the best approach is for this design.
I should add that the problem occurs when the icons are nested on an inner row. This is necessary to have the image on the left. With the new approach the icons are in a tier one row which works for some reason.
Hello there,
You need to hide the parent column
Alternatively we can use custom CSS to make the buttons responsive on mobile.
Thanks,