The Custom CSS setting lets you add custom styles that apply across the entire online store. Enter your CSS code in the CSS field to customize the appearance of theme elements beyond the available theme settings.
To use this section, go to Theme editor > Theme settings > Custom CSS.
Note: Custom CSS isn't supported on the Checkout page. Also, please use this section if you have the knowledge about HTML, CSS; because if you use incorrect code, it can be break layout and have issues with theme design.
This is the trick if you want to use custom CSS for a specific device. We have the responsive code for each device:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}