Welcome to WebmasterWorld Guest from 18.205.109.82

Forum Moderators: not2easy

Message Too Old, No Replies

Media Queries- first foray

     
7:20 pm on Jan 26, 2016 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


I'm just now getting into more responsive design outside of bootstrap. I have all the images set to widths so that they can change according to screen size. Works well to a point. What I thought I could do, maybe I'm not doing it right or thinking about it properly. I thought at the various break points, I could simply change the percentage to make the proper change once the images were too hard to see at the lowest resolutions. Either this can't be done or else I'm doing it incorrectly.
normal css in external file

#header {background: no-repeat url('headerback.png'); background-repeat: repeat-y; background-color: #000000; padding-bottom:2em;}

#footer
{
clear: both;
font-size:8pt;
font-style:italic;
text-align:center;
}

#nav
{
background: url('navbar.png');
width: 100%;
height: 44px;
float:left;
}

#content
{
background: url('flag.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 80%;
font-size:14pt;
}

...

@media only screen and (min-device-width : 960px) and (max-device-width : 1024px) and (orientation : portrait)
{
.notetext
{
width:75%;
}
#tower
{

width:20%;

}

}


When I save and upload the css, there is no change at the first breakpoint and the last curley brace is a different strength as if it were closed off somewhere else. What am I doing wrong here? Thanks in advance!
8:10 pm on Jan 26, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4458
votes: 331


It is easy to make errors in media queries, that is why I always take css to w3's jigsaw: [jigsaw.w3.org...] to validate it, it will show you where it needs some work.

In this case, in place of:
min-device-width :

try
min-width:

because device pixel ratios vary and the nominal device width may not be the same as viewed width.

For the curly braces, it is missing the opening curly brace that should be as shown here, right after the
(max-width: 1024px) {


BTW, you don't need to set a min-width for the media query because when it reaches 960px, the next media query:
(max-width: 960px) {

takes over.

Personally I prefer to use ems for measurement.
10:57 pm on Jan 26, 2016 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


Thanks!
3:15 am on Jan 27, 2016 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:15159
votes: 170


Not sure if this will help you, but I just came across a new open source tool that generates responsive image breakpoints [responsivebreakpoints.com]. I have not tried it yet, but this article made it sound pretty helpful: [smashingmagazine.com...]
4:15 pm on Jan 27, 2016 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


@media only screen and (max-width : 1024px) and (orientation : portrait) {
.notetext{width:75%;}
#tower{width:20%;}

}

There is still no change. The notetext should be huge!
I'm testing it on a full screen desktop and shrinking the window. Do I need to test it on a naive device? Where am I missing it?
4:58 pm on Jan 27, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4458
votes: 331


Shrinking the browser window does not alter your device, try using one of the online tools or browser extensions. I use the FF developer toolbar and their Responsive Design View. There are better tools, depending on what browser you are using.

I am a little surprised that it is not changing in a desktop browser at all. Did you validate your css and html at Jigsaw? There are some other issues I can see in your css. For example, in the header you have two opposite settings for background. Jigsaw can show you what to fix and how to fix it. Then you can expect it to work as you want. Is that 75% supposed to be 75% of the screen width or is it within a container?
6:20 pm on Jan 27, 2016 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


I just checked it with jigsaw and it only found one issue- couldn't find bootstrap, which I did not upload. The css was all valid. Thanks for jigsaw. I'll use it more often. Any recommendations for responsive design views on firefox?
10:14 pm on Jan 27, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4458
votes: 331


I use the Developer Toolbar extension. There is a teeny hamburger type menu in the upper right corner of the browser (Mac) that has the Responsive Design viewer listed under Developer with the wrench icon.
4:13 pm on Jan 28, 2016 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


i grabbed the plug in for responsive design view and it works beautifully. I would have preferred to make more breakpoints to check, but this does a great job! Thanks all!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members