CSS Framework: Bootstrap 4
JQUERY, JS MASK for validation and input masking
Custom CSS used for styling elements including coloring, margins, padding, and font sizing
Optimized for Desktop and Laptop screen sizes
Not fully responsive on Mobile, Tablet, and Very Large Screen devices
I am currently working on designing an intuitive product add screen for my inventory software at fireworkstech.com. The challenge I'm facing is ensuring responsiveness across different screen sizes, particularly small and oversized screens where elements tend to get distorted or misplaced.
If you have any insights or tips on how to improve the responsiveness or spot a mistake in the HTML/CSS code embedded within this question, please share. Your assistance is greatly appreciated!
Thank you in advance
.top_navigation {
background-color: #875a7b;
height: 41px;
}
.button_color {
background-color: #00a09d
}
.container {
color: #9f7b95
}
.product_detail_nav nav li {
color: #9f7b95
}
.product_new {
margin-left: 115px;
}
...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
...
</body>
</html>