wogie36 Posted May 27, 2021 Posted May 27, 2021 On 5/26/2021 at 11:19 AM, tuanphan said: You want this direction? Yes exactly 🙂
orneverornow Posted May 31, 2021 Posted May 31, 2021 On 7/30/2020 at 5:40 PM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* swap block order */ div#page-section-5f22d4ae41363b1aac10c22a .span-12>.row { display: flex; flex-direction: column-reverse; } } Hi @tuanphan I am struggling with the same problem. Could you help me to find the proper codes? https://www.real-identity.ch/ PW: birdhouse I want to have the following order in mobile: - team: always portrait > text, portrait > text... - home section services: graphical element > text, graphical element > text... Many thanks for your help and kind regards Sibylle
tuanphan Posted June 1, 2021 Posted June 1, 2021 On 5/31/2021 at 7:00 PM, orneverornow said: Hi @tuanphan I am struggling with the same problem. Could you help me to find the proper codes? https://www.real-identity.ch/ PW: birdhouse I want to have the following order in mobile: - team: always portrait > text, portrait > text... - home section services: graphical element > text, graphical element > text... Many thanks for your help and kind regards Sibylle Add to Design > Custom CSS /* Mobile */ @media screen and (max-width:767px) { /* team */ div#page-section-60702b75f0b59828641e5d95 .span-12>.row:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1618583688705_52632+.row, div#block-yui_3_17_2_1_1617962790299_23249+.row, div#block-yui_3_17_2_1_1620635631890_46648+.row{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } If it works, let me know. I will check homepage Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
orneverornow Posted June 2, 2021 Posted June 2, 2021 21 hours ago, tuanphan said: Add to Design > Custom CSS /* Mobile */ @media screen and (max-width:767px) { /* team */ div#page-section-60702b75f0b59828641e5d95 .span-12>.row:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1618583688705_52632+.row, div#block-yui_3_17_2_1_1617962790299_23249+.row, div#block-yui_3_17_2_1_1620635631890_46648+.row{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } If it works, let me know. I will check homepage Hi @tuanphan! Thank you so much. It works perfectly for the team page. Could you also please send me the code for the homepage? The graphical elements under REAL competence should always come before the text. Many thanks and kind regards Sibylle
wogie36 Posted June 3, 2021 Posted June 3, 2021 Hi @tuanphan, have you an idea about my issue ? I saw it work but only for 2 columns, that's correct ? Its not possible with more columns ? Already Thanks Wogie
tuanphan Posted June 4, 2021 Posted June 4, 2021 On 6/2/2021 at 7:40 PM, orneverornow said: Hi @tuanphan! Thank you so much. It works perfectly for the team page. Could you also please send me the code for the homepage? The graphical elements under REAL competence should always come before the text. Many thanks and kind regards Sibylle Add to Design > Custom CSS /* Mobile-Home-Order */ @media screen and (max-width:767px) { div#block-048ca2e0eded4950bb70+.row, div#block-339fcaacff2248dafd8c+.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
tuanphan Posted June 4, 2021 Posted June 4, 2021 22 hours ago, wogie36 said: Hi @tuanphan, have you an idea about my issue ? I saw it work but only for 2 columns, that's correct ? Its not possible with more columns ? Already Thanks Wogie Your case is very complex, need to use JS to move each image. Each image will need a code. Can you add me as a contributor? I will test some other approach Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
orneverornow Posted June 11, 2021 Posted June 11, 2021 On 6/4/2021 at 11:48 AM, tuanphan said: Add to Design > Custom CSS /* Mobile-Home-Order */ @media screen and (max-width:767px) { div#block-048ca2e0eded4950bb70+.row, div#block-339fcaacff2248dafd8c+.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } Hi @tuanphan It works, thank you so much!!!!!!!
wogie36 Posted June 16, 2021 Posted June 16, 2021 On 5/26/2021 at 11:19 AM, tuanphan said: On 6/3/2021 at 12:58 PM, wogie36 said: Hi @tuanphan, have you an idea about my issue ? I saw it work but only for 2 columns, that's correct ? Its not possible with more columns ? Already Thanks Wogie Your case is very complex, need to use JS to move each image. Each image will need a code. Can you add me as a contributor? I will test some other approach @tuanphan I can let you try some other approach but if you find a way with JS, do you think I can copy your JS process by myself in the future ? Because a lot of image will come in the future.
tuanphan Posted June 17, 2021 Posted June 17, 2021 20 hours ago, wogie36 said: @tuanphan I can let you try some other approach but if you find a way with JS, do you think I can copy your JS process by myself in the future ? Because a lot of image will come in the future. Each situation will need a different JS. And especially, if you delete or move a block, you may need to update the entire JS code. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
wogie36 Posted June 17, 2021 Posted June 17, 2021 @tuanphanit seem to be difficult on the long term. A bit sad but thanks anyway tuanphan. Do you think its possible to manage the code with some very little knowledge of coding ? or it's advanced coding knowledge? thx 😉
domofash_ Posted August 27, 2021 Posted August 27, 2021 (edited) Hi @tuanphan i need help also this link pw:123 the section with Angelique for mobile i'd like to reverse the order so instagram grid is under her photo card ♥ Edited August 28, 2021 by domofash_
tuanphan Posted August 30, 2021 Posted August 30, 2021 On 8/27/2021 at 7:00 PM, domofash_ said: Hi @tuanphan i need help also this link pw:123 the section with Angelique for mobile i'd like to reverse the order so instagram grid is under her photo card ♥ Answered your message. You can check again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
nataliaswarz Posted September 14, 2021 Posted September 14, 2021 Hi @tuanphan! Can you help me with mine please? For the footer in mobile only, https://monicamojica.squarespace.com/ This is the order I'd like to achieve + make the instagram block align in one line only. Thanks in advance!
tuanphan Posted September 16, 2021 Posted September 16, 2021 On 9/14/2021 at 7:54 PM, nataliaswarz said: Hi @tuanphan! Can you help me with mine please? For the footer in mobile only, https://monicamojica.squarespace.com/ This is the order I'd like to achieve + make the instagram block align in one line only. Thanks in advance! Add to Design > Custom CSS /* Mobile Footer Order */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1630780782396_9645+.row { display: flex; flex-direction: column; } /* image */ div#block-yui_3_17_2_1_1630780782396_9645+.row .span-6 { order: 1; } /* top links */ div#block-yui_3_17_2_1_1630780782396_9645+.row .span-3:first-child { order: 2; } /* bottom links */ div#block-yui_3_17_2_1_1630780782396_9645+.row .span-3:last-child { order: 3; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
jesswp Posted September 27, 2021 Posted September 27, 2021 On 7/30/2020 at 11:40 AM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* swap block order */ div#page-section-5f22d4ae41363b1aac10c22a .span-12>.row { display: flex; flex-direction: column-reverse; } } Hey @tuanphan! Do you mind letting me know how to achieve the mobile block swap function below? I am looking to have image shows first, then the description + button. https://platinum-goldfish-ewl6.squarespace.com/treatments pass: skin In some other threads, I notice you use a single block ID to identify. How would this work in my case as there are multiple block ID (Title text block, line block, description text block and button block) Thanks so much!
tuanphan Posted September 28, 2021 Posted September 28, 2021 On 9/27/2021 at 7:49 AM, jesswp said: Hey @tuanphan! Do you mind letting me know how to achieve the mobile block swap function below? I am looking to have image shows first, then the description + button. https://platinum-goldfish-ewl6.squarespace.com/treatments pass: skin In some other threads, I notice you use a single block ID to identify. How would this work in my case as there are multiple block ID (Title text block, line block, description text block and button block) Thanks so much! Add to Design > Custom CSS /* Treatments image text order mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1632702196855_20283+.row { display: flex; flex-direction: column-reverse; } div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(5) { display: flex; flex-direction: column-reverse; } div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(7) { display: flex; flex-direction: column-reverse; } } Each section needs a different combination. It is very difficult to Explain. If you have a problem, just post it on the forum, we're always here to help. jesswp 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
jesswp Posted September 28, 2021 Posted September 28, 2021 12 hours ago, tuanphan said: Add to Design > Custom CSS /* Treatments image text order mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1632702196855_20283+.row { display: flex; flex-direction: column-reverse; } div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(5) { display: flex; flex-direction: column-reverse; } div#page-section-61510d58a101dd2018890fd2 .span-12>.row:nth-child(7) { display: flex; flex-direction: column-reverse; } } Each section needs a different combination. It is very difficult to Explain. If you have a problem, just post it on the forum, we're always here to help. You are awesome. Thanks so much!!
jesswp Posted September 28, 2021 Posted September 28, 2021 @tuanphan Unrelated but same site. Is there a way to put a background on just this one block? I am using a plugin that's pulling this content from a summary block. Attaching what I am looking to achieve on the main page https://platinum-goldfish-ewl6.squarespace.com/ skin Appreciate it!
tuanphan Posted October 2, 2021 Posted October 2, 2021 On 9/29/2021 at 6:24 AM, jesswp said: @tuanphan Unrelated but same site. Is there a way to put a background on just this one block? I am using a plugin that's pulling this content from a summary block. Attaching what I am looking to achieve on the main page https://platinum-goldfish-ewl6.squarespace.com/ skin Appreciate it! Try this CSS div#block-yui_3_17_2_1_1632273069150_6340+.row { background-color: white; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
jesswp Posted October 7, 2021 Posted October 7, 2021 On 10/2/2021 at 4:20 AM, tuanphan said: Try this CSS div#block-yui_3_17_2_1_1632273069150_6340+.row { background-color: white; } Thanks! How can we include the line and the title a well?
tuanphan Posted October 10, 2021 Posted October 10, 2021 On 10/7/2021 at 11:46 PM, jesswp said: Thanks! How can we include the line and the title a well? Add new code div#page-section-614a78e4ee606b6b17a08e08 { background-color: white; padding: 20px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
jesswp Posted November 5, 2021 Posted November 5, 2021 Hey @tuanphan! Looking to swap order for a few of the blocks... do you mind helping? https://snail-sprout-zgz3.squarespace.com/about pass: workout Black section towards the middle/bottom -- Looking to swap picture #2 with "get ready to bounce on". Order should go photo #1, text, photo #2, "text, "title header: get ready to bounce", spotify playlist. Thanks so much!
tuanphan Posted November 7, 2021 Posted November 7, 2021 On 11/5/2021 at 9:44 AM, jesswp said: Hey @tuanphan! Looking to swap order for a few of the blocks... do you mind helping? https://snail-sprout-zgz3.squarespace.com/about pass: workout Black section towards the middle/bottom -- Looking to swap picture #2 with "get ready to bounce on". Order should go photo #1, text, photo #2, "text, "title header: get ready to bounce", spotify playlist. Thanks so much! You mean I want photo I want text I believe photo I belive text Ready to get Playlist is this right? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment