Problem: I have a smartphone optimized webpage but that page doesn't look as good on a desktop/pc. When I try making the desktop version look good, it is spoiling the mobile look. I want to be able to design the page that uses different parts of the code in a webpage depending on the device in question.
Is it possible to write device (desktop/pc or mobile device/smartphone) specific code in a single webpage?
Read this doc am sure it will help more
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
the name of this work is "responsive design" the main idea is to use css ×Ĥedia queries to determine screen size and apply specific styles per screen size
try this link to get started: https://www.freecodecamp.org/news/media-query-css-example-max-and-min-screen-width-for-mobile-responsive-design/
What is Responsive Design? Responsive Design is the practice of making sure your content looks good on all screen sizes. Everything in the website including layouts, fonts and images should automatically adapt to the user's device.
What is a Media Query? In CSS, a media query is used to apply a set of styles based on the browser's characteristics including width, height, or screen resolution.
Here is the basic syntax for a media query in CSS:
@media media-type (media-feature){
/*Styles go here*/
}