Making homepage different on mobile phones does not work

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

Previous topic - Next topic
Print
Go Down Pages1
User actions

Shram Vandreen

April 06, 2024, 07:39:29 AM Last Edit: April 06, 2024, 07:44:57 AM by Steve Reason: Added code tags.
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:

Code Select
<!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

#1
April 06, 2024, 07:43:28 AM
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

#2
April 06, 2024, 07:58:03 AM
What I do is use a portal and set blocks depending on PC Or mobile

Julius_2000

#3
April 23, 2024, 08:01:08 PM Last Edit: April 23, 2024, 08:21:13 PM by Julius_2000
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:
Code Select
<meta name="viewport" content="width=device-width, initial-scale=1">

Arantor

#4
April 27, 2024, 07:40:24 PM
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.
Print
Go Up Pages1
User actions
Advertisement: