Newbie Media Query Problems

HTML & CSS
1

Hello everyone and thanks for the help in advance. I am a neophyte in UI design and am trying to build a single, responsive webpage which can be viewed at http://www.271madison.com/home/slideshow. I am having problems simply resizing the description text below the slideshow. I have tried the following media query:

@media only screen and (min-width: 768px) {
    .Description{
    font-family:  Arial; 
    font-size: 1.6em; 
    color: gray;
}
@media only screen and (max-width: 768px) {
    .Description{
    font-family:  Arial; 
    font-size: .6em; 
    color: blue;
}
}
.HeadTitle{
    font-size: 1.8em;
}

but this does not seem to change anything on a mobile phone (I’m currently using Samsung Note 10+ with Chrome). Any help would be appreciated.

2

[off-topic]
@kmcnet when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

3

Thank you. And apologies.

1 Like
4

The validator is your friend :slight_smile:

You have a missing closing tag for the first media query.

@media only screen and (min-width: 768px) {
    .Description{
    font-family:  Arial; 
    font-size: 1.6em; 
    color: gray;
}
}/* this one was missing*/
@media only screen and (max-width: 768px) {
    .Description{
    font-family:  Arial; 
    font-size: .6em; 
    color: blue;
}
}

Note that generally you don’t need to mix min and max media queries. Just use one or the other. One set can be the default and then just modify it for your breakpoints.

e.g.

.Description {
  font-family: Arial;
  font-size: 1.6em;
  color: gray;
}
@media only screen and (max-width: 768px) {
  .Description {
    font-size: 0.6em;
    color: blue;
  }
}

No need for min and max media queries as the first block styles it for everyone and the media query modifies the rule for smaller devices. In that way you only need to specify the differences and not the whole set of rules.

2 Likes
5

Thank you. I should have seen that. Since I come from a mostly programming background, accepting defaults is a scary deal, but it makes sense the way you explained it. One other question. After getting the media query working, the text on the mobile still tends to be very narrowly formatted. Obviously its coming from the

<div style="width:  50%; margin: 0 auto;">

But I am not sure how to tackle that problem.

6

Avoid inline styles at all costs and instead add a class to the element and handle its presentation from the css file.

You can then easily adjust the width in your small screen media query as required :slight_smile:

2 Likes
7

Thanks again for the help. I tried moving it to the style sheet:

.divDescription{
         width:  50%; margin: 0 auto;
     }
.Description{
    font-family:  Arial; 
    font-size: 1.2em; 
    color: gray;
    }

}@media only screen and (min-width: 768px) {
     .divDescription{
         width:  80%; margin: 0 auto;
     }
    .Description{
        font-family:  Arial; 
        font-size: 1.6em; 
        color: gray;

    }
}

but the mobile version still doesn’t display correctly. I’m sensing I might be going down a rabbit hole the way I’m attacking the problem, but haven’t figured out a better solution.

8

Do you really need the text column to have a constant width of 50% ?

.divDescription {
    margin: 0 auto;
    width: 50%;
}

Have you considered a max-width value instead? … such as max-width:768px, or an em value.

1 Like
9

Targetting devices is always a pain, it never has clicked for me. Are you sure you’re getting that media query to trigger at all? I target my Galaxy 8 with:

@media only screen and (max-device-width:50em)
	and (min-resolution: 192dpi)
	{ ... }
10

No, I don’t need the fixed width, but I’m not exactly sure what you are suggesting.

11

And yes, I have verified that the media query is firing. But I appreciate the thought.

12

By taking a quick look at your website I can see that you have media query with min-width check which only triggers for landscape laptop+ sized screens.

  • Open Developer Tools (e.g. in Google Chrome it’s F12 on Windows)
  • Toggle device toolbar (Ctrl + Shift + M)
  • And bellow the settings you will see all your media queries defined, by clicking on them screen will auto match it to test it. There only appears a media query for screen widths > 768px.

image
image1111×670 284 KB

I’m not sure why you even need media queries for just aligning text.

Regarding layout - remove any inline styles or unneeded widths or margins:

<div class="container">
  <div class="description">Lorem ipsum...</div>
</div>

.container {
  margin: 1rem;
}

.description {
  color: gray;
  text-align: justify;
}

If this is not what you are looking for then please just draw what you want to see in mobile and desktop versions on paper and upload an image - it will be way easier to answer your questions.

13

You should have used the max-width media query as you have done the opposite of what you wanted :slight_smile:

You made the element 50% wide for small screen and 80% wide for larger screens which is the opposite of what you wanted:)

Ron was suggesting that you use a max-width in px for your description instead of width and then it will naturally take up all the available room when the screen is smaller than your max-width. No media queries would be needed.

e.g.

.divDescription{
width:auto ;/* not needed but there to show the width should be removed*/
max-width:980px;
margin:auto;
}
1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.