Put text blocks side by side on mobile

@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 🙂

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?

Thanks a lot for your reply @tuanphan ❤️

I think Code Block sounds like a great idea.

How does that work?

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

Thank you so much @tuanphan I really appreciate it!

Hi @tuanphan!

Just writing again to remind you, but no stress 🙂 

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

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! 🙂

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;
}

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 ❤️ 

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;
}
}

Now it works on both mobile and desktop, yay!

Thank you so much for your patience and help in solving this @tuanphan ❤️ Much appreciated! 

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!

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;
}
}