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
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.
What I do is use a portal and set blocks depending on PC Or mobile
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">
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.