If you want to hide the text 'Welcome Jon deo', a simple solution is to change the <span> tags to <p>, and add an ID attribute so you can target it in your CSS. Additionally, insert another <p> element with its own ID for further manipulation using CSS and JavaScript. Make sure to assign an ID to your button as well for easy selection via JavaScript. I have indicated the specific modifications to be made in your HTML code below:
<html>
<header>
<title>This is title</title>
****UPDATE HERE***
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
</header>
<body>
<button id="menuBtn" type="button">menu</button> ***MODIFY HERE***
<div class="greetings">
<br>
<p id="text">Welcome Jon deo</p> ***MODIFY HERE***
<p id="text2">G</p> ***MODIFY HERE***
</div>
<div class="this">
<br>
</div>
<span>Web Content</span>
</body>
</html>
Below is the CSS snippet to keep the 'G' hidden unless viewed on tablets or mobile phones:
#text2 {
display: none;
}
To dynamically switch from displaying 'Welcome etc etc' to 'G', implement the following JavaScript function alongside your existing code:
const text = document.getElementById('text');
const menuBtn = document.getElementById('menuBtn');
// Click event listener for the menu button
menuBtn.addEventListener('click', changeText);
// Function to update text content
function changeText() {
text.innerHTML = 'G';
};
In order to automatically showcase 'G' on smaller screens, adjust your meta tags in the HTML section (refer to the changes implied above) and apply media queries within your CSS code:
/* Viewport settings for extra small devices (phones, 600px and below) */
@media only screen and (max-width: 600px) {
#text {
display: none;
}
#text2 {
display: block;
}
}
/* Display settings for small devices (portrait tablets and large phones, 600px and beyond) */
@media only screen and (min-width: 600px) {
#text {
display: none;
}
#text2 {
display: block;
}
}
/* Handling of medium devices (landscape tablets, maximum width at 768px) */
@media only screen and (max-width: 768px) {
#text {
display: none;
}
#text2 {
display: block;
}
}