Hide Element on Mobile: <div class=”desktop-only”>This content is visible only on desktop.</div> <div class=”mobile-only”>This content is visible only on mobile.</div> <style> .desktop-only { display: block; } .mobile-only { display: none; } @media only screen and (max-width: 767px) { .desktop-only { display: none; } .mobile-only { display: block; } } </style>
This example shows how to show or hide elements based on the screen size. The first <div> is visible only on desktops, while the second one is visible only on mobile devices.
Smooth Scrolling: <a href=”#section-id”>Go to Section</a> <section id=”section-id”> <!– Content goes here –> </section>
Add an id attribute to the section you want to scroll to and use an anchor tag with the corresponding href. When clicked, the page will smoothly scroll to that section.
Placeholder Color: <input type=”text” placeholder=”Enter your name” style=”color: gray;”>
Change the color of the placeholder text by using the style attribute and setting the color property.
Leave a Reply