News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Making homepage different on mobile phones does not work

Started by Shram Vandreen, April 06, 2024, 07:39:29 AM

Previous topic - Next topic

Shram Vandreen

Hey guys,

I have a HTML page that serves as a homepage, my forums is the /smf section. I tried to make my homepage different on phones, but it did not work. What did I do wrong?

Here is the code:

<!DOCTYPE html>
<html>
<head>
    <title>Algemene Fora - General Forums</title>
</head>
<body>
    <div class="desktop-display">
<button><a href="https://algemenefora.site/smf/">Forums</a></button>
<button><a href="https://algemenefora.site/IT_support/">IT support</a></button>
</div>
<div class="mobile-display">
<button><a href="https://algemenefora.site/smf/">Forums</a></button>
<button><a href="https://algemenefora.site/IT_support/">IT support</a></button>
</div>
<style media="all">
.mobile-display{display:none}
.desktop-display{display:block}
[member=49905]Media[/member] (max-width:800px){
. desktop-display {display:none}
. mobile-display {display:block}
}
</style>
</body>
</html>

Edit: This topic is in the wrong section. It needs to be in "Scripting" under "General community"

Please use code tags when posting code ~ Steve
Dutch and English forum for any topic: https://algemenefora.site/smf/index.php

Visit Algemene Fora (General Forums/Forums about anything) now and become moderator.

Steve

Quote from: Shram Vandreen on April 06, 2024, 07:39:29 AMEdit: This topic is in the wrong section. It needs to be in "Coding" under "General chat"
I see no problem with it being where it is.
DO NOT pm me for support!

mickjav

What I do is use a portal and set blocks depending on PC Or mobile
Site Under redesign not expected to be complete before January 2026

Julius_2000

#3
Quote from: Shram Vandreen on April 06, 2024, 07:39:29 AMHey guys,

I have a HTML page that serves as a homepage, my forums is the /smf section. I tried to make my homepage different on phones, but it did not work. What did I do wrong?

Here is the code:

Quote<style media="all">
.mobile-display{display:none}
.desktop-display{display:block}
@Media (max-width :800px){
._desktop-display {display:none}
._mobile-display {display:block}
}
</style>

You made a couple of small mistakes I marked red above. You left space between the second pair of css display classes and their dots and also missed the media query designator for your display size. Also, the "member" code looks out of place (BBcode perhaps?) there and maybe shouldn't be in a style code (at least once removed, and the corrections applied, it worked then). And there were colons missing from the css values.

This is how it should work
Quote<style media="all">
    .mobile-display{display: none;}
    .desktop-display{display: block;}
@ Media (max-width: 800px) { /*no space between @ symbol and media*/
    .desktop-display {display: none;}
    .mobile-display {display: block;}
}
</style>

Edit: Seems like SMF's auto correction confused the @ media code with a member from this board :), because when I use this line @Media (spaces between equal sign for demonstration), it creates @Media instead.

So, bottom line is: Spaces between the dots for the classes were the culprits.

Also: You may want to consider adding this meta tag to the head while optimizing for mobile devices. That way browsers could handle various screen sizes better:
<meta name="viewport" content="width=device-width, initial-scale=1">

Arantor

Quote from: Julius_2000 on April 23, 2024, 08:01:08 PMEdit: Seems like SMF's auto correction confused the @ media code with a member from this board

That's because a quote tag was used, not a code tag. Should be fine with an actual code tag.

Advertisement: