change text on different size screen - html

Question

So I am making a website using the mobile first method. now my question is: how can i change the text/images etc (not the font-size)?
so when you open the site on a phone it show a text for example: hello there and when your on a laptop/pc it show a different text like: have a nice day the same goes for images/buttons
I know the #media screen and (min-width) but how do I add this to the html without showing the text when not needed?

Answer 1

I have given two solutions.
#1 Solution: display: none / display: block
This is a fairly simple and common way to display content, depending on the screen size. And as I said above in the comments, you can operate on the display: none / display: block rule by setting two texts in the container.
Also, by turning off the visibility of the text for a mobile device, using the pseudo-class :nth-child():
.container p:nth-child(2) {
display: none;
}
And from to, the media query will turn the rules for each text:
#media (max-width: 767px) {...}
.container p {
font-size: 32px;
color: green;
}
.container p:nth-child(2) {
display: none;
}
#media (max-width: 767px) {
.container p:nth-child(1) {
display: none;
}
.container p:nth-child(2) {
display: block;
}
}
<div class="container">
<p>This is notebook</p>
<p>This is mobile</p>
</div>
#2 Solution: pseudo-class :after
This solution is less code, due to the absence of the need to specify the text in the tags. In this case, the text is passed as the content: '' parameter.
.container p {
font-size: 32px;
color: green;
}
.container p:after {
content: 'This is notebook';
}
#media (max-width: 767px) {
.container p:after {
content: 'This is mobile';
}
}
<div class="container">
<p></p>
</div>

Answer 2

Simply use JavaScript. For example, if you have this for mobile users:
<div class="mobile"><p>Hey, I'm on mobile!</p></div>
And this for PC users:
<div class="computer"><p>Hey, I'm on PC!</p></div>
Then you can do it like this:
<script>
const mobile = document.querySelector(".mobile"),
pc = document.querySelector(".computer"),
media = window.matchMedia("(max-width: 1000px)")
if (media.matches) {
mobile.style.display = "none"
pc.style.display = "block"
} else {
pc.style.display = "none"
mobile.style.display = "block"
}
</script>

Answer 3

You can use #media only screen and (hover: none). It's a media query that detects devices with hover ability. So you can write your original code for mobile first and then add your media query for devices that don't have hover abilities like desktops. It doesn't require to specify a screen width or anything like that since you can't predict every screen size out there. It automatically detects devices with hover or not for every screen size
Exmp:
#media only screen and (hover: none){
.mystyle{
// your style here
color: red
}
}
I think it's a good way without having the need to duplicate your code.