MaggieBovary Posted April 22, 2020 Share Posted April 22, 2020 Site URL: https://villa-rondinelli.squarespace.com/ Hi all, in a couple of pages of my website the mobile version swapped some of the blocks order: - here: https://villa-rondinelli.squarespace.com/storia - and here: https://villa-rondinelli.squarespace.com/ambienti password: maggie-villa There should be the text first and then the image throughout the page. I tried so many different solutions and nothing seems to work 😕 I thought I could solve it with 'flex-direction: column-reverse' but I couldn't manage to select a specific block as some of them don't have IDs, so it selects all the items with the same class name. Any suggestion on how to solve this and, in general, how to select a tag that does't have a specific ID without selecting all the tags with the same name? Thanks! Link to comment
Solution tuanphan Posted April 23, 2020 Solution Share Posted April 23, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* Pietro Porcinai */ div#block-yui_3_17_2_1_1586517061377_18576+.row { display: flex; flex-direction: column-reverse; } } violettag 1 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
MaggieBovary Posted April 24, 2020 Author Share Posted April 24, 2020 18 hours ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* Pietro Porcinai */ div#block-yui_3_17_2_1_1586517061377_18576+.row { display: flex; flex-direction: column-reverse; } } Awesome, thank you! Any idea on how to do the same for the page: https://villa-rondinelli.squarespace.com/ambienti ? Link to comment
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 (edited) 27 minutes ago, MaggieBovary said: Awesome, thank you! Any idea on how to do the same for the page: https://villa-rondinelli.squarespace.com/ambienti ? @media screen and (max-width:767px) { /* ambienti */ div#block-yui_3_17_2_1_1587201576001_10935+.row { display: flex; flex-direction: column-reverse; } } Edited April 24, 2020 by tuanphan 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
MaggieBovary Posted April 24, 2020 Author Share Posted April 24, 2020 1 hour ago, tuanphan said: @media screen and (max-width:767px) { /* ambienti */ div#block-yui_3_17_2_1_1587201576001_10935+.row { display: flex; flex-direction: column-reverse; } } It works! Thanks a lot! 🙂 tuanphan 1 Link to comment
MaggieBovary Posted April 25, 2020 Author Share Posted April 25, 2020 On 4/24/2020 at 11:06 AM, tuanphan said: @media screen and (max-width:767px) { /* ambienti */ div#block-yui_3_17_2_1_1587201576001_10935+.row { display: flex; flex-direction: column-reverse; } } Can I ask you how did you find the blocks which you assigned the column-reverse property to? @tuanphan Link to comment
tuanphan Posted April 25, 2020 Share Posted April 25, 2020 5 hours ago, MaggieBovary said: Can I ask you how did you find the blocks which you assigned the column-reverse property to? @tuanphan The block you need to do has no ID. div#block-yui_3_17_2_1_1587201576001_10935 is the ID of the block above + target the next block (below) of the current ID MaggieBovary 1 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
stephan1982 Posted April 28, 2020 Share Posted April 28, 2020 On 4/25/2020 at 11:51 PM, tuanphan said: The block you need to do has no ID. div#block-yui_3_17_2_1_1587201576001_10935 is the ID of the block above + target the next block (below) of the current ID Hi, I still don’t get don‘t get which block I have to assign the reverse to. Could you explain a little more detailed which is the right block? Thanks!! Link to comment
tuanphan Posted April 29, 2020 Share Posted April 29, 2020 9 hours ago, stephan1982 said: Hi, I still don’t get don‘t get which block I have to assign the reverse to. Could you explain a little more detailed which is the right block? Thanks!! Can you share link to your site & describe your problem? 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
stephan1982 Posted April 29, 2020 Share Posted April 29, 2020 7 hours ago, tuanphan said: Can you share link to your site & describe your problem? Sure, thanks for replying! Here is the page: https://bit.ly/2YkYgqT I want to reverse the 1st and 3rd block with the iPad images, but only on the mobile view. The code works in generaI but I am struggeling with finding the correct block IDs. Link to comment
georgerobertatherton Posted August 15, 2020 Share Posted August 15, 2020 Hey guys! I'm having a similar issue with this website. Any help would be greatly appreciated. https://www.nudoeducation.com/education https://www.nudoeducation.com/book-now Password is nudo. I'd like to reverse two sections on the website, on the Education Page and Book Now Page. I have attached two screen shots. I've tried using the code above, but I can't seem to ID either section. Thank you in advance!! Link to comment
tuanphan Posted August 17, 2020 Share Posted August 17, 2020 On 8/15/2020 at 4:56 PM, georgerobertatherton said: Hey guys! I'm having a similar issue with this website. Any help would be greatly appreciated. https://www.nudoeducation.com/education https://www.nudoeducation.com/book-now Password is nudo. I'd like to reverse two sections on the website, on the Education Page and Book Now Page. I have attached two screen shots. I've tried using the code above, but I can't seem to ID either section. Thank you in advance!! text - image - text - image or image- text-image-text? 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
georgerobertatherton Posted August 18, 2020 Share Posted August 18, 2020 @tuanphan hey! On the education page mobile version, it should read text-image-text-image-text-image. Cheers, George Link to comment
tuanphan Posted August 22, 2020 Share Posted August 22, 2020 On 8/18/2020 at 5:32 PM, georgerobertatherton said: @tuanphan hey! On the education page mobile version, it should read text-image-text-image-text-image. Cheers, George Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1595510187505_33358+.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
FPV Posted August 29, 2020 Share Posted August 29, 2020 (edited) Hi @tuanphan Since you've been so helpful to the other people in this thread, I was wondering if you could assist me with a page that's giving me trouble. The format of the middle section of this page completely changes around in mobile view: https://www.preventionofviolence.com/mage-fire-gaming I'd like this page to go image-text image-text-image text for the three large middle sections. The order as follows: #block-yui_3_17_2_1_1597830887342_57265 = (dice picture) #block-yui_3_17_2_1_1597547652702_64039 = (WHAT ARE TABLETOP ROLE-PLAYING GAMES? + paragraph) #block-c80e6cd8b7f5926b6144 = (Picture of man on horse) #block-d56ec6e2b390e65b99e0 = (HOW RPGS AFFECT PLAYERS + paragraph) #block-fbd8462699e9679223f4 (Picture of boy) #block-yui_3_17_2_1_1597830887342_103041 (APPROACHING THERAPY THROUGH GAMING + paragraph) If it's not possible to move the blocks around that much, I'd settle for switching #block-d56ec6e2b390e65b99e0 and #block-yui_3_17_2_1_1597830887342_103041. Thank you in advance! Edited August 29, 2020 by FPV Link to comment
tuanphan Posted August 30, 2020 Share Posted August 30, 2020 11 hours ago, FPV said: Hi @tuanphan Since you've been so helpful to the other people in this thread, I was wondering if you could assist me with a page that's giving me trouble. The format of the middle section of this page completely changes around in mobile view: https://www.preventionofviolence.com/mage-fire-gaming I'd like this page to go image-text image-text-image text for the three large middle sections. The order as follows: #block-yui_3_17_2_1_1597830887342_57265 = (dice picture) #block-yui_3_17_2_1_1597547652702_64039 = (WHAT ARE TABLETOP ROLE-PLAYING GAMES? + paragraph) #block-c80e6cd8b7f5926b6144 = (Picture of man on horse) #block-d56ec6e2b390e65b99e0 = (HOW RPGS AFFECT PLAYERS + paragraph) #block-fbd8462699e9679223f4 (Picture of boy) #block-yui_3_17_2_1_1597830887342_103041 (APPROACHING THERAPY THROUGH GAMING + paragraph) If it's not possible to move the blocks around that much, I'd settle for switching #block-d56ec6e2b390e65b99e0 and #block-yui_3_17_2_1_1597830887342_103041. Thank you in advance! Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1597866196425_90293+.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
FPV Posted August 31, 2020 Share Posted August 31, 2020 @@tuanphan That almost worked, except now the order is #block-d56ec6e2b390e65b99e0 = (HOW RPGS AFFECT PLAYERS + paragraph) #block-yui_3_17_2_1_1597547652702_64039 = (WHAT ARE TABLETOP ROLE-PLAYING GAMES? + paragraph) #block-yui_3_17_2_1_1597830887342_103041 = (APPROACHING THERAPY THROUGH GAMING + paragraph) And I need the order to be #block-yui_3_17_2_1_1597547652702_64039 = (WHAT ARE TABLETOP ROLE-PLAYING GAMES? + paragraph) #block-d56ec6e2b390e65b99e0 = (HOW RPGS AFFECT PLAYERS + paragraph) #block-yui_3_17_2_1_1597830887342_103041 (APPROACHING THERAPY THROUGH GAMING + paragraph) Is there any way to do that? Link to comment
tuanphan Posted September 1, 2020 Share Posted September 1, 2020 Can you remove block id in your code? Difficult to read the comment. Do you still need help on this? 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
FPV Posted September 1, 2020 Share Posted September 1, 2020 @@tuanphan Sorry! Hope this is better. And yes, I still need help. Thank you! That almost worked, except now the order is HOW RPGS AFFECT PLAYERS WHAT ARE TABLETOP ROLE-PLAYING GAMES? APPROACHING THERAPY THROUGH GAMING And I need the order to be WHAT ARE TABLETOP ROLE-PLAYING GAMES? HOW RPGS AFFECT PLAYERS + paragraph APPROACHING THERAPY THROUGH GAMING Is there any way to do that? Link to comment
Skyflare Posted September 2, 2020 Share Posted September 2, 2020 (edited) Dear @tuanphan, I am trying to wreck my head around changing the order for mobile users on our landing page. I have been trying to retarget some of your scripts, but I can not seem to get the hang of it. The URL is https://scolutions.nl I want to change the order of the following column on mobile So that the image on the left comes above the text on the right (on mobile) Kind regards, Edited September 2, 2020 by Skyflare Link to comment
tuanphan Posted September 2, 2020 Share Posted September 2, 2020 Add to Home > design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1599046164194_17101+.row { display: flex; flex-direction: column-reverse; } } Skyflare 1 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
Skyflare Posted September 2, 2020 Share Posted September 2, 2020 4 hours ago, tuanphan said: Add to Home > design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1599046164194_17101+.row { display: flex; flex-direction: column-reverse; } } Thank you very much! I checked the code and now also understand what to target! Link to comment
mpressmeredith Posted September 7, 2020 Share Posted September 7, 2020 Hi there, I have a similar issue, but have not been able to apply this solution to my pages. There are too many block IDs, I don't know which one to specify in the code. On each of these two pages in mobile view (https://www.braveryonfire.com/watch) and (https://www.braveryonfire.com/donate), I would like the image that currently displays on top of the lower block to load below it - so on the "watch" page the "save the date" image displays on top of the ribbon image, and on the "donate" page the "donate" embed block displays on top of the ribbon image. (The site is built using 7.1.) Thanks in advance for any assistance! Meredith Tarr Link to comment
Guest Posted September 9, 2020 Share Posted September 9, 2020 (edited) Hi @tuanphan! As always you are super helpful. Check out the page I'm having issues with: www.deatongroupllc.com/services On desktop, looks great. On mobile, it is currently: Image Strategy - markdown image Assessment & Action plan - markdown image Customized Service proposal - markdown Discovery - markdown image Business consulting - markdown image Fix-it sprint - markdown Image It should be: image Discovery - markdown image Strategy - markdown image Business consulting - markdown image Assessment & Action plan - markdown image Fix-it sprint - markdown Image Customized Service proposal - markdown I used the following CSS code but it isn't helping: @media screen and (max-width:640px) { #services .sqs-row { display: -webkit-flex; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } Can you help? Thanks! Edited September 9, 2020 by SBSidekick Link to comment
tuanphan Posted September 9, 2020 Share Posted September 9, 2020 On 9/8/2020 at 4:16 AM, mpressmeredith said: Hi there, I have a similar issue, but have not been able to apply this solution to my pages. There are too many block IDs, I don't know which one to specify in the code. On each of these two pages in mobile view (https://www.braveryonfire.com/watch) and (https://www.braveryonfire.com/donate), I would like the image that currently displays on top of the lower block to load below it - so on the "watch" page the "save the date" image displays on top of the ribbon image, and on the "donate" page the "donate" embed block displays on top of the ribbon image. (The site is built using 7.1.) Thanks in advance for any assistance! Meredith Tarr Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-section-5f47f7f3b3e6f52ce01842dd>.row:nth-child(2) { display: flex; flex-direction: column-reverse; } /* donate page */ div#page-section-5f46b201135d856fe97b4d5d>.row:nth-child(2) { 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment