tuanphan Posted April 27, 2020 Posted April 27, 2020 12 minutes ago, theokoustas said: Hi the desktop padding worked perfectly thank you so much! One last thing and im done... the top and bottom padding in mobile version did not work, Also I would love to donate for your services where can I do that? Thanks again for your patience Edit the code I sent, to this and add to Home > Settings > Advanced > Code Injection > Header <style> /* remove image blocks padding */ [data-section-id="5e73347bc0821f49f60360e0"] .image-block { padding: 0 !important; } </style> If you want to donate, use this link 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!)
merakiconceptstudio Posted April 27, 2020 Posted April 27, 2020 On 4/25/2020 at 9:39 AM, tuanphan said: Add to Last Line in Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1587744359724_8306 { margin-top: 0 !important; position: static !important; } } Amazing! How can I get this to show before the images on mobile?
tuanphan Posted April 27, 2020 Posted April 27, 2020 4 minutes ago, merakiconceptstudio said: Amazing! How can I get this to show before the images on mobile? @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1587744359724_8306 { position: static !important; } div#page-section-5ea30e882988be03b5735ec8 .span-12 .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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
merakiconceptstudio Posted April 27, 2020 Posted April 27, 2020 2 minutes ago, tuanphan said: @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1587744359724_8306 { position: static !important; } div#page-section-5ea30e882988be03b5735ec8 .span-12 .row { display: flex; flex-direction: column-reverse; } } You are a lifesaver! Thank you so much. 🙂
theokoustas Posted April 28, 2020 Posted April 28, 2020 19 hours ago, tuanphan said: Edit the code I sent, to this and add to Home > Settings > Advanced > Code Injection > Header <style> /* remove image blocks padding */ [data-section-id="5e73347bc0821f49f60360e0"] .image-block { padding: 0 !important; } </style> If you want to donate, use this link Hi, The mobile version is not working! the 0 padding top and bottom! on the sides its fine tho
tuanphan Posted April 28, 2020 Posted April 28, 2020 44 minutes ago, theokoustas said: Hi, The mobile version is not working! the 0 padding top and bottom! on the sides its fine tho collie-collie-pedb.squarespace.com pw: gkoustascare123 Add this to Home > Design > Custom CSS. I will work. div#block-9acacb79707f826e4872, div#block-yui_3_17_2_1_1587576462470_17063, div#block-yui_3_17_2_1_1587576462470_28461, div#block-yui_3_17_2_1_1586863360945_37113 { padding-bottom: 0 !important; padding-top: 0 !important; } theokoustas 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!)
Guest Posted May 3, 2020 Posted May 3, 2020 Hi @tuanphan! You seem to be the expert at reordering blocks on mobile- I've been stuck on this issue and can't seem to find a resolution- would you be able to help? I love the mosaic gallery display on the front page of my website in desktop, but everything displays out of order on mobile. Is there a way to fix this? Thank you so much for your help! site: https://www.oathanddream.com
tuanphan Posted May 3, 2020 Posted May 3, 2020 1 hour ago, JPrete said: Hi @tuanphan! You seem to be the expert at reordering blocks on mobile- I've been stuck on this issue and can't seem to find a resolution- would you be able to help? I love the mosaic gallery display on the front page of my website in desktop, but everything displays out of order on mobile. Is there a way to fix this? Thank you so much for your help! site: https://www.oathanddream.com Which gallery? Which order you want? 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!)
Guest Posted May 4, 2020 Posted May 4, 2020 On 5/2/2020 at 11:46 PM, tuanphan said: Which gallery? Which order you want? Hi tuanphan! I'd love for this gallery to be numerically ordered (I don't really mind about the order of the photos), and right now, they are lining up as 1,3,2,4 on mobile. Is there a way to fix that? Thank you so much!!
tuanphan Posted May 12, 2020 Posted May 12, 2020 On 5/4/2020 at 10:35 PM, JPrete said: Hi tuanphan! I'd love for this gallery to be numerically ordered (I don't really mind about the order of the photos), and right now, they are lining up as 1,3,2,4 on mobile. Is there a way to fix that? Thank you so much!! Missing your comment. Have you solved yet? 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!)
laurasharp Posted July 25, 2020 Posted July 25, 2020 Hi @tuanphan! I would like to switch the ordering of the "Elevate Your Wellness" section of the homepage to where the photo shows before the illustration, header, and body text. I am attaching the mobile view screenshots of what it currently looks like. I would like it to be the same ordering as the sections above and below it, the "Elevate Your Business" and "Elevate Your Impact" sections. Also, could you also help with reducing the large amount of spacing between each of the elements? The website is www.flygeorge.com and password FlyGeorge20! Thanks so much!
tuanphan Posted July 26, 2020 Posted July 26, 2020 On 6/16/2020 at 8:23 AM, julia1 said: Anyone got any guidance on how to do this in 7.1? 🙏 Can you share link to your site& describe in detail? We can help easier. 9 hours ago, laurasharp said: Hi @tuanphan! I would like to switch the ordering of the "Elevate Your Wellness" section of the homepage to where the photo shows before the illustration, header, and body text. I am attaching the mobile view screenshots of what it currently looks like. I would like it to be the same ordering as the sections above and below it, the "Elevate Your Business" and "Elevate Your Impact" sections. Also, could you also help with reducing the large amount of spacing between each of the elements? The website is www.flygeorge.com and password FlyGeorge20! Thanks so much! Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1594322502639_33219+.row { display: flex; flex-direction: column-reverse; } } laurasharp 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!)
LaurenF Posted January 11, 2021 Posted January 11, 2021 @tuanphan I have tried a couple of your solutions on my page but i'm doing something wrong. could you please help? I want the 3 images to show first and then the WHO WE ARE text section to show after, instead of the way it is now. the page is https://keyboard-swordfish-dk95.squarespace.com/ password: test. Thank you
creedon Posted January 11, 2021 Posted January 11, 2021 3 hours ago, LaurenF said: I want the 3 images to show first and then the WHO WE ARE text section to show after It appears the arrangement is as you describe. Image first and text to the right (after). When you say after do you mean below? If yes then you can edit the page and drag and drop the elements to rearrange them. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
tuanphan Posted January 12, 2021 Posted January 12, 2021 On 1/11/2021 at 7:01 AM, LaurenF said: @tuanphan I have tried a couple of your solutions on my page but i'm doing something wrong. could you please help? I want the 3 images to show first and then the WHO WE ARE text section to show after, instead of the way it is now. the page is https://keyboard-swordfish-dk95.squarespace.com/ password: test. Thank you Add to Design > Custom CSS @media screen and (max-width:767px) { div#page-5ffb61fc204f8126440bc2dd>.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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
SouthernSunEvents Posted March 14, 2021 Posted March 14, 2021 Trying to switch these two image blocks on mobile view too. Any code tips? www.southernsunevents.com PW: sse2020
creedon Posted March 14, 2021 Posted March 14, 2021 @SouthernSunEvents No code needed to fix this. You just need to rearrange the images. Currently you have them set up as two columns side by side. So when the image are wrapped for mobile they are out of the desired order. Edit the page and put two line blocks across the full with of the page. Then rebuild your layout using the lines to keep from accidentally creating unwanted columns. Put two images above the first line block side by side. Then put two images between the first and second line blocks side by side. Save the page. Test that the order is right on mobile. If OK then go back in and remove the line blocks. Save. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
SouthernSunEvents Posted March 16, 2021 Posted March 16, 2021 On 3/14/2021 at 4:59 PM, creedon said: @SouthernSunEvents No code needed to fix this. You just need to rearrange the images. Currently you have them set up as two columns side by side. So when the image are wrapped for mobile they are out of the desired order. Edit the page and put two line blocks across the full with of the page. Then rebuild your layout using the lines to keep from accidentally creating unwanted columns. Put two images above the first line block side by side. Then put two images between the first and second line blocks side by side. Save the page. Test that the order is right on mobile. If OK then go back in and remove the line blocks. Save. Let us know how it goes. Thanks for your response. Just did this and it seems to still be stacking the images by row Left - Right Left - Right but in this instance I want it to stack Left - Right Right - Left so that I have wedding - venue - wedding - venue. Not sure if this makes any sense typing it all out!
creedon Posted March 16, 2021 Posted March 16, 2021 @SouthernSunEvents Now that the layout is fixed up we can use the following to accomplish what I think you want. Add the following to Design > Custom CSS. @media only screen and ( max-width : 640px ) { #page-5e1df5f56b4ecf142af1d0d5 > .sqs-row .sqs-row:nth-child( 4 ) { display : flex; flex-direction : column-reverse; } } This is for v7.0 using the Brine template family. If you remove the line blocks the number four (nth-child) will need to be adjusted. Probably two if you remove all the line blocks. Test that the order is right on mobile before doing so. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
SouthernSunEvents Posted March 18, 2021 Posted March 18, 2021 On 3/15/2021 at 10:02 PM, creedon said: @SouthernSunEvents Now that the layout is fixed up we can use the following to accomplish what I think you want. Add the following to Design > Custom CSS. @media only screen and ( max-width : 640px ) { #page-5e1df5f56b4ecf142af1d0d5 > .sqs-row .sqs-row:nth-child( 4 ) { display : flex; flex-direction : column-reverse; } } This is for v7.0 using the Brine template family. If you remove the line blocks the number four (nth-child) will need to be adjusted. Probably two if you remove all the line blocks. Test that the order is right on mobile before doing so. Let us know how it goes. Fixes the order perfect but reverts back when I remove the line blocks.
creedon Posted March 18, 2021 Posted March 18, 2021 26 minutes ago, SouthernSunEvents said: Fixes the order perfect but reverts back when I remove the line blocks. After you removed the lines did you change the 4 to 2 as I suggested? #page-5e1df5f56b4ecf142af1d0d5>.sqs-row .sqs-row:nth-child( 2 ) { Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
SouthernSunEvents Posted March 18, 2021 Posted March 18, 2021 17 hours ago, creedon said: After you removed the lines did you change the 4 to 2 as I suggested? #page-5e1df5f56b4ecf142af1d0d5>.sqs-row .sqs-row:nth-child( 2 ) { So sorry I missed that in your last message. It works perfect, thank you so much! If time allows, might I ask for your help on these two other threads I'm needing help on?
tuanphan Posted March 22, 2021 Posted March 22, 2021 On 3/19/2021 at 12:34 AM, SouthernSunEvents said: So sorry I missed that in your last message. It works perfect, thank you so much! If time allows, might I ask for your help on these two other threads I'm needing help on? Have you solved both yet? 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