awk Posted February 16, 2021 Share Posted February 16, 2021 Site URL: https://www.taylergroup.com/team-copy-for-mobile-test Hi there, Was wondering if anyone can help me rearrange the blocks in the team section of my site so that mobile viewing can look like IMAGE TEXT IMAGE TEXT Currently it's showing as: TEXT IMAGE IMAGE TEXT TEXT IMAGE Thank you so much! Link to comment
dvgdvgdvg Posted February 16, 2021 Share Posted February 16, 2021 (edited) Add this to your custom CSS: @media screen and (max-width:640px) { div#block-6d69e12e014e3d9add6b+.row, div#block-1220f1cf71ba0a72fc4d+.row { display: flex!important; flex-direction: column-reverse!important; } } Credit: I modified code provided by @tuanphan in this forum post. Edited February 17, 2021 by dvgdvgdvg Link to comment
awk Posted February 16, 2021 Author Share Posted February 16, 2021 Hi, for some reason it isn't working 😕 Link to comment
dvgdvgdvg Posted February 17, 2021 Share Posted February 17, 2021 1 hour ago, awk said: Hi, for some reason it isn't working 😕 Sorry about that, it was working perfectly in Inspector so not sure why; but I updated the code in the previous comment to try a different approach and it should work now — try again! Link to comment
awk Posted February 17, 2021 Author Share Posted February 17, 2021 Thank you so much!!! @dvgdvgdvg it worked perfectly! Link to comment
awk Posted February 17, 2021 Author Share Posted February 17, 2021 So I'd need to change the code to work with this page then? https://www.taylergroup.com/team Link to comment
dvgdvgdvg Posted February 17, 2021 Share Posted February 17, 2021 3 minutes ago, awk said: So I'd need to change the code to work with this page then? https://www.taylergroup.com/team Yep – the code works by targeting the row after each spacer block we include the ID for, so you just swap out the bits between each hashtag and plus sign with the IDs for the blocks on this page. So that code would be: @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1612348299837_249909+.row, div#block-yui_3_17_2_1_1611844728135_430177+.row, div#block-yui_3_17_2_1_1611844728135_62014+.row, div#block-yui_3_17_2_1_1611844728135_350620+.row { display: flex!important; flex-direction: column-reverse!important; } } Link to comment
awk Posted February 17, 2021 Author Share Posted February 17, 2021 You are incredible! Thank you so much for your help!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment