Consider eliminating the inline style and focusing solely on CSS styles. Utilizing a media query can help define parameters for mobile view, allowing you to create 2 versions of CSS - one for desktop (your traditional CSS) and another for mobile devices (using a media query within your CSS).
The code snippet below showcases how to have a blue background on desktop and green on mobile:
/*CSS*/
body {
background-color: blue;
}
@media only screen and (max-width: 600px) {
body {
background-color: green;
}
}
Apply this same principle when writing specific code for your <DIV>. Assign an id to it and reference that in your CSS for desktop styling, then utilize @media to target that id and adjust it for mobile devices.
By resizing your browser, you can test the responsiveness of your design. Additionally, exploring flexbox can greatly assist with layout challenges, as it allows for flexible design options both inside and outside the media query for size-specific adjustments.
We hope this information addresses your inquiry. Feel free to share any discoveries or further questions!