Different displays for desktop and mobile not working correctly-CodePudding

I am trying to create different displays for a webpage for desktop and mobile devices. Based on tutorials I have tried copying the following code right below the header section and before the body section.

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


<div >
My mobile content.
</div>

<div >
My desktop content.
</div>

This is located above all the content so that the content would be the same for types of devices and only the message at the top would be different. I expected to see the message "My desktop content" right above the webpage when viewing in the desktop and "My mobile content" above the webpage when viewing in mobile. Instead I saw "My desktop content" in both the desktop and the mobile versions. I would like help figuring out why it is not displaying correctly on mobile devices.

Note that I think that this is the only code relevant to the problem, but if needed I can include other code from the test page.

CodePudding user response：

The CSS code you've provided seems correct for creating different displays for desktop and mobile devices using CSS media queries. Can you please confirm, that you have added a tag for responsive design.

Please add the following meta tag to your HTML , if you haven't.

<meta name="viewport" content="width=device-width, initial-scale=1">

The tag with the name="viewport" and its associated content attribute controls the behaviour of a web page's viewport on mobile devices. It is an essential part of creating responsive and mobile-friendly web designs.

If you have added the above tag and are still having issue then it can be other reasons, like,

if you have any external CSS files, make sure they do not override the styles you've defined in your block.
Check there are no conflicting CSS rules affecting the display property. In CSS, more specific rules or rules with higher specificity can override others.
Try to open the browser's developer tools(Inspect Elements) to check which CSS is applying. This can help you determine if the styles are being overridden or not applied as expected.

If everything mentioned above is in order on your end and you are still experiencing issues, please share more of the code or a screenshot of your problem.

CodePudding user response：

I am not sure if this is the best answer, but I found a way to get it to work. I found you can do it with php like this.

<?php
$ismobile = 
is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),"mobile"));
?>

<?php if($ismobile) : ?>
My mobile content
<?php else : ?>
My desktop content
<?php endif; ?>

CodePudding user response：

To use @media you have to follow rule.

For example,

@media only screen and (max-width:800px){
  .desktop-display {display:none}
  .mobile-display {display:block}
}

I hope this answer can help you.

Good luck.