I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase.
.hdrinfo{
width: 51%;
margin: 0 auto;
display: flex;
flex-direction: row;
}
When this div displays on a tablet, my goal is for its width to be 75%, and on a smartphone, it should expand to 100%. Despite numerous attempts at media queries based on extensive reading, I've been struggling with implementing this. Can anyone guide me in the right direction?
UPDATE: I have modified the CSS to make it more evident whether the queries are functioning correctly:
.hdrcntr{
width: 52%;
height: 100%;
margin: 0 auto;
background: green;
}
@media only screen and (max-width:992px){
.hdrcntr{
width: 75%;
background: steelblue;
}
}
@media only screen and (max-width:412px){
.hdrcntr{
width: 100%;
background: tomato;
}
}
My approach involves using different background colors as indicators: green for default, steelblue for iPad, and tomato for Samsung S8+. This method works well for both desktops and iPads. However, despite trying to cater to the Samsung S8 dimensions provided by official specs and other sources, I haven't been successful in getting the correct display (always shows steelblue).