Set different home page for mobile

[Ilina Catana]

Hey @arminunruh ! I'd like to set a different home page for mobile than for desktop. This topic was addressed in 2020 here but no "perfect" solution was really found. Maybe you have a better idea?

Best!

[arminunruh]

hey i think you need to use the custom phone layout feature

[Ilina Catana]

Hey @arminunruh thanks for answering!

This is also the idea I had. If my home page is the "Home" page and the "A" page is the page I would like to have on mobile instead of the "Home" page, I can create a mobile layout "Home - Mobile" that has the same design as my "A - Mobile" page and make sure that the "A" page does not appear in the mobile menu. But it requires my client to edit the "Home-Mobile" page manually every time he edits/changes the content of the "A" page. This is quite annoying.

Isn't there a code solution where simply the Home page does not appear on mobile, and an existing page replaces it? That would be really ideal :=)

[arminunruh]

how about this

<script>
if( jQuery('body').hasClass('slug-frontpage') && jQuery('html').hasClass('is-touchdevice') ){
window.location.replace("http://www.google.com");
}
</script>

make sure you use the correct slug for 'slug-frontpage'
and you use the correct url to redirect to instead of http://www.google.com

[Ilina Catana]

@arminunruh thank you very much for getting back to me!

I tried the code, for some reason it doesn't work yet but I'll try again tomorrow. Here is what I tried:

<script>
if( jQuery('body').hasClass('https://www.ludwigschoepfer.de') && jQuery('html').hasClass('is-touchdevice') ){
window.location.replace("https://www.ludwigschoepfer.de/index");
}
</script>

Homepage is called "https://www.ludwigschoepfer.de", replace page should be "https://www.ludwigschoepfer.de/index" (by the way, the website is now online). I also tried as a slug-frontpage only '/home' without success.

If you see at first glance what went wrong, don't hesitate to let me know :)

Best!

[arminunruh]

@Ilina-Catana said in Set different home page for mobile:

if( jQuery('body').hasClass('https://www.ludwigschoepfer.de') && jQuery('html').hasClass('is-touchdevice') ){

nono this is wrong hehe :D

go here:
https://laytheme.com/documentation/custom-css-styling.html

see this video:

u need to get the body class "slug-*" and use that, not te URL :D