Media Query CSS and Notepad++ Compatibility Issue

Media Query CSS and Notepad++ Compatibility Issue?

You code is not incorrect. It's just that Notepad++ doesn't recognize media queries. But, that doesn't mean your code won't work on browsers/devices.

Don't worry about the color highlighting. You are doing it right.

Cheers!!!!

CSS3 Media Queries not working in Notepad++

You want

@media screen and (max-width: 480px) {
#content {
background-color:red;
}
}

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

see the first example, rules go inside of the media query

IE 10 on WP8 ignores media queries?

It looks like you've sorted it now with bootstrap, but it's possible the site kicked in to EmulateIE7 (for compatibility) for some reason. It seems Lumia can also pick up on this for example if you have the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag and of course media queries are not supported on IE7.

Html and css mobile compatible

Try using percentage measurements instead of pixel measurement's.

For example:

.example {width: 100%}

rather than:

.example {width: 700px}

Also as mentioned above use some CSS Media Queries.

So for example:

@media screen and (max-width: 700px) {
img {width: 200px}
}

This says that whenever someone is viewing on a device with a screen smaller than 700px, the image will be 200px.

Hope this helps.

[Edit] To Test Your Site On Mobile -

1) Open the webpage you want to test in Chrome.

2) Right click and click 'Inspect'

3) Then a grey window should appear either at the bottom of your browser or the right hand side of your browser.

4) At the top left corner of the new grey window there will be a two buttons, click the one that says "toggle device toolbar"

Toggle Device Toolbar Icon

You can now select different devices and see how they appear in each.

How to implement responsive web design and its best practices

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.

Prepend all CSS selectors

Your comment under sabithpocker's answer tells me that instead of dynamically changing your styles, you are looking to statically modify your CSS. I think this would be easiest with a regular expression:

Find: ([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
Replace with: $1#content $2

Breakdown of Regex

  • ([,|\}][\s$]*) - Finds the } or , from the previous style followed by whitespace (spaces/tabs: \s, newlines: $). The closing brace\comma keeps the regex from looking inside the body of your style.
  • [\.#]? - Matches the starting # or . in the style name, if it is present.
  • -?[_a-zA-Z]+ - CSS style names can start with an underscore or letters. Also, style names can be prepended by a dash.
  • [_a-zA-Z0-9-]* - Matches the rest of the style name. This can be omitted, but it might be nice to know the style name of all the styles that were modified.
  • $1#content $2 - The } (or ,) and whitespace is left the way it was found ($1). It is followed by your inserted text #content (note the space), which is then followed by the style name ($2).

I tested this in Notepad++ and it works on my stylesheets.

It should be noted, that if your CSS is not compressed (and is multiline),
you will need editor that supports multi-line regular expressions (Notepad++ does).

Automapper: reusing created maps

You shouldn't have to re-do the Foo/FooDto mapping logic. Any time AutoMapper finds the Foo/FooDto pair, whether it's in an array of values, dictionary, collection, child member or whatever, that Foo/FooDto configuration will be used. AutoMapper doesn't care where the type pair is found.

How can I remove the gap from the top of page?

After troubleshooting and looking for hidden or erroneous UTF characters we figured out that the cause was an un-closed meta charset tag.

<meta charset="UTF-8"/>


Related Topics



Leave a reply



Submit