1

I'm hoping that this question can be a jumping point for helping me understand responsive design. Consider a header on a typical desktop screen. I have a div that will contain the information I want to display:

.hdrinfo{
    width: 51%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}

When the div is displayed on a tablet I want the width to be at 75% and on a smartphone I want the div at 100%. I've made many attempts at media queries to facilitate this base on the numerous, numerous articles I've read - to my frustration. Can someone point me in the right direction?

UPDATE: I've edited the CSS to make is move obvious (at least to me) on whether or not the queries are working:

.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 logic is that the background defaults to green. On an iPad the background is steelblue and on my Samsung S8+ the background is tomato.

This logic works for both the desktop and the iPad; however, despite the official Samsung spec of (360x740) and two other websites that claim (412x846) I cannot get the S8 to display correctly (shows steelblue).

Elcid_91
  • 1,571
  • 4
  • 24
  • 50

3 Answers3

0

That would be as follows. The actual max-width values can vary. Note that the rules overwrite each other in the order they are written if a device is for example less than 400px wide.

.hdrinfo{
    width: 51%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
@media (max-width: 768px) {
  .hdrinfo {
     width: 75%;
  }
}
@media (max-width: 400px) {
  .hdrinfo {
     width: 100%;
  }
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • This is the part where I get a bit frustrated. Just tested the media queries above and all three of my devices (desktop, iPad and Sony S8) are at 51%. – Elcid_91 Feb 22 '18 at 13:02
  • did you put them in *this* order, and the 51% won't appear anywhere below again? – Johannes Feb 22 '18 at 14:41
  • The above media query should work, for testing, just use desktop browser and change the browser size to see the media query in action. It is also much easier to inspect on a browser to see why your media query is not working – Huangism Feb 22 '18 at 15:49
0

I had a problem that @media query was not working on mobile phone display, it completely ignored it even when mobile phone had small rough display (amount of pixels) make sure that you include <meta name> in every html page in <head> section:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
... your rest of the page

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device) - info from w3school site.

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser - info from w3school site.

You can read more about this here: https://www.w3schools.com/cSS/css_rwd_viewport.asp

Addionaly I suspect the keyword only may be the issue here. I have no issues using media queries like this:

@media screen and (max-width: 992px) { }

This is taken from another thread Why are my CSS3 media queries not working on mobile devices?

I hope this helps with your problem.

ryan
  • 1
  • 1
0

This should work for you: Look at the with min-width and max-width.

@media screen and (min-width:413px){
    .hdrcntr{
        width: 75%;
        background: steelblue;
    } 
}
@media screen and (max-width:412px){
    .hdrcntr{
        width: 100%;
        background: tomato;
    } 
}

https://codepen.io/anon/pen/mxvWYp

dudster
  • 16
  • 4