Maielstrom Posted August 19, 2022 Share Posted August 19, 2022 Site URL: https://www.ericsdream.world/motorcycle-signal-indicator Hello everyone, I am seeking assistance with how I can reorder the display order for mobile of my page here - https://www.ericsdream.world/motorcycle-signal-indicator. Currently, the mobile display orders everything vertically based on left to right; however, I want to have the text first followed by the images, so I would need to reverse the display of rows 2, 4, 6, and 8. I attempted a few code alterations I found utilizing flex and flex-direction but I couldn't seem to get this to work. Any thoughts? Thanks! Link to comment
tuanphan Posted August 21, 2022 Share Posted August 21, 2022 Hi. What should it look like? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Maielstrom Posted August 21, 2022 Author Share Posted August 21, 2022 47 minutes ago, tuanphan said: Hi. What should it look like? Hello and thanks for replying! Using the page as a reference beginning with the drawing row (after the 3rd white line divider), I currently have (left to right) Image - Text followed by Text - Image on desktop. When viewing on mobile, it vertically loads as: Image Text Text Image So, I am trying to reverse the order of the second row so it views as: Image Text Image Text I had thought I could use flex and flex-direction as I did on another one of my pages; however, altering that code is not working for this instance so I'm not sure if this is possible or if I might be using the wrong selector. For reference, this is the code I was trying (I tried adjusting the nth-child parameter and no number yielded any type of reaction on the page - I also tried testing the code by using it to shut off row visibility but also received no reaction): @media screen and (max-width:767px) { div#page-62ce2c8c4b497007840bec21 .span-12>.row:nth-child(6) { display: flex; flex-direction: column-reverse; } } Link to comment
tuanphan Posted August 23, 2022 Share Posted August 23, 2022 Try adding to Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1661009258166_23638+.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1661009258166_31232+.row { display: flex; flex-direction: column-reverse; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Maielstrom Posted August 25, 2022 Author Share Posted August 25, 2022 (edited) On 8/22/2022 at 10:36 PM, tuanphan said: Try adding to Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1661009258166_23638+.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1661009258166_31232+.row { display: flex; flex-direction: column-reverse; } } Magnificent, thank you for this! This did work and I was able to find the respective selectors to adjust throughout the page. (After consideration I was looking for text first then image, so just the matter of selecting those rows for column-reverse instead) Thanks again! Edited August 25, 2022 by Maielstrom tuanphan 1 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