This looks completely scrambled for me on mobile. I think you've misunderstood how to approach mobile first styling maybe. Your mobile styles should be the base, no media query for that.
I also recommend
- changing all font sizes to rem not px
- removing bootstrap unless you really need it. This is a fairly simple challenge and with the amount of custom css you're writing already, bootstrap is just adding bloat and complexity for you.
I hope this helps
One more really important thing - at the moment you've made the logo (the most important content on the page) a background image. How would search engines or assistive tech know what the name of this product is?
@aavv8931
Posted
@grace-snow Thank you very much for your recommendations. I consider that they are fundamental, especially when teaching me the correct mobile-first approach 😉
@zebra-not-donkey
Posted
@grace-snow please. Can you explain more because i didn't understand the part of phone, why don't we use media query
I hope you reply
@aavv8931
Posted
@zebra-not-donkey what I research about this was that "Mobile First Approach refers to the practice of designing and/or developing an online experience for mobile before designing for desktop web or any other device. Taking a Mobile First approach aims to reverse the workflow of designing for desktop and scaling down the design for mobile afterwards" This means that you design mobile first as a base without media query just like @grace-snow said. Use media query for scaling up.
