anjaemzen Posted October 13, 2022 Share Posted October 13, 2022 @tuanphan Or is it better to disable "Show Global Site Footer" (see screen shot) and add the "Previous" and "Next" links to each project page in the footer? I would like them to be placed like on the IKEA Lighting page that you helped me with, although the two text paragraphs that are currently in the footer can't be shown side by side on mobile view since that would't look good. For those text paragraphs I think it works well as they are shown now, both on desktop and mobile view. Just thinking of options 🙂 Link to comment
tuanphan Posted October 16, 2022 Share Posted October 16, 2022 On 10/13/2022 at 4:02 PM, anjaemzen said: @tuanphan Or is it better to disable "Show Global Site Footer" (see screen shot) and add the "Previous" and "Next" links to each project page in the footer? I would like them to be placed like on the IKEA Lighting page that you helped me with, although the two text paragraphs that are currently in the footer can't be shown side by side on mobile view since that would't look good. For those text paragraphs I think it works well as they are shown now, both on desktop and mobile view. Just thinking of options 🙂 Each page will require a different code to make side by side. Or we can use a Code Block to do this, so you just need copy - paste between pages & edit url. What do you think? anjaemzen 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!) Link to comment
anjaemzen Posted October 16, 2022 Share Posted October 16, 2022 Thanks a lot for your reply @tuanphan ❤️ I think Code Block sounds like a great idea. How does that work? Link to comment
tuanphan Posted October 17, 2022 Share Posted October 17, 2022 14 hours ago, anjaemzen said: Thanks a lot for your reply @tuanphan ❤️ I think Code Block sounds like a great idea. How does that work? I will code this & give you soon If you doesn't get an answer within next 48 hours, you can comment to remind me anjaemzen 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!) Link to comment
anjaemzen Posted October 17, 2022 Share Posted October 17, 2022 Thank you so much @tuanphan I really appreciate it! Link to comment
anjaemzen Posted October 20, 2022 Share Posted October 20, 2022 Hi @tuanphan! Just writing again to remind you, but no stress 🙂 Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 On 10/13/2022 at 4:02 PM, anjaemzen said: @tuanphan Or is it better to disable "Show Global Site Footer" (see screen shot) and add the "Previous" and "Next" links to each project page in the footer? I would like them to be placed like on the IKEA Lighting page that you helped me with, although the two text paragraphs that are currently in the footer can't be shown side by side on mobile view since that would't look good. For those text paragraphs I think it works well as they are shown now, both on desktop and mobile view. Just thinking of options 🙂 First, add this code to Design > Custom CSS div.custom-page { display: flex; align-items: center; justify-content: space-between; } Next, edit page where you want to place previous/next, add a Code Block > Paste this code <div class="custom-page"> <div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"> <h3 style="white-space:pre-wrap;"><a href="/ikea-wall-shelves"><span style="text-decoration:underline">Previous</span></a></h3> </div></div> <div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"> <h3 style="white-space:pre-wrap;"><a href="/ikea-wall-shelves"><span style="text-decoration:underline">Next</span></a></h3> </div></div> </div> Do this for all pages you want & replace url with new url If it doesn't work, keep the code & share link to page where you added the code, we can check easier anjaemzen 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!) Link to comment
anjaemzen Posted October 23, 2022 Share Posted October 23, 2022 Thank you for the code @tuanphan It works! Just that the Previous and Next text doesn't align with the outer margins in desktop view (on mobile it looks perfect!). See https://www.anjaemzen.com/printfabriken where I added the Code block, and the IKEA Lighting as reference https://www.anjaemzen.com/ikea-lighting for how it should look in desktop view. Almost there! 🙂 Link to comment
tuanphan Posted October 27, 2022 Share Posted October 27, 2022 On 10/24/2022 at 1:19 AM, anjaemzen said: Thank you for the code @tuanphan It works! Just that the Previous and Next text doesn't align with the outer margins in desktop view (on mobile it looks perfect!). See https://www.anjaemzen.com/printfabriken where I added the Code block, and the IKEA Lighting as reference https://www.anjaemzen.com/ikea-lighting for how it should look in desktop view. Almost there! 🙂 Add this to Design > Custom CSS .custom-page>div:first-child { padding-left: 0 !important; } .custom-page>div:last-child { padding-right: 0 !important; } 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!) Link to comment
anjaemzen Posted October 28, 2022 Share Posted October 28, 2022 Thank you for the new code @tuanphan Now it looks great in desktop view but has no margins anymore in mobile view 😛 See https://www.anjaemzen.com/printfabriken. Thank you again for all of your help ❤️ Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/28/2022 at 1:51 PM, anjaemzen said: Thank you for the new code @tuanphan Now it looks great in desktop view but has no margins anymore in mobile view 😛 See https://www.anjaemzen.com/printfabriken. Thank you again for all of your help ❤️ You can wrap query code for above code @media screen and (min-width:768px) { .custom-page>div:first-child { padding-left: 0 !important; } .custom-page>div:last-child { padding-right: 0 !important; } } anjaemzen 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!) Link to comment
anjaemzen Posted November 1, 2022 Share Posted November 1, 2022 Now it works on both mobile and desktop, yay! Thank you so much for your patience and help in solving this @tuanphan ❤️ Much appreciated! tuanphan 1 Link to comment
kiyary Posted April 19, 2023 Share Posted April 19, 2023 Hello @tuanphan, you seem to be the master of coding! I also noticed just today (maybe I messed It myself), my footer is divided in two columns in mobile, and I would like it to be one line like on desktop. Could you help me please? I try to use the codes you gave to everyone here, but nothing was happening so I deleted them. I tried to find the same id or block id, but I really have no idea what I am doing xD. the website is www.kiyary.com Thank you! Link to comment
tuanphan Posted April 22, 2023 Share Posted April 22, 2023 On 4/19/2023 at 8:17 PM, kiyary said: Hello @tuanphan, you seem to be the master of coding! I also noticed just today (maybe I messed It myself), my footer is divided in two columns in mobile, and I would like it to be one line like on desktop. Could you help me please? I try to use the codes you gave to everyone here, but nothing was happening so I deleted them. I tried to find the same id or block id, but I really have no idea what I am doing xD. the website is www.kiyary.com Thank you! Add to Design > Custom CSS @media screen and (max-width:640px) { div#page-section-6026975bce45d66ed9ffe2c6 .span-12>.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } 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!) 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