Recently I built website on Wordpress.com but my first text looks bad in mobile device the address is codecamp.kz. What is the problem?
<h1 style="text-align:center;">НАУЧИСЬ ПРОГРАММИРОВАТЬ НА iOS С НУЛЯ</h1>
<h3 class="r"></h3>
<div style="text-align:center;"><a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLSfLVUls_4LAE-Gte_90wCHLwWulCS3N8aUix6mDZiw0XZFePQ/viewform">Подать заявку</a></div>
I think the problem is that the browser detects your text as one word and browser interprets it shouldn't be broken.
You don't need media queries for this, instead you only need one css rule:
h1 {
word-break: break-word;
}
Solution 2
For extra points! On your html you probably have something like:
{НАУЧИСЬ ПРОГРАММИРОВАТЬ НА iOS С НУЛЯ}
Just remove the and that should do the trick.
My example:
Hope this is useful.
Edit Added an image of the result.
You'll need to use media queries to size your text correctly. Also, that empty <h3> should probably be deleted. There are some odd   in the title - perhaps WordPress is putting those in?
Media queries will allow you to apply different styling based on different parameters: width, height, orientation, pixel density, etc... Here are some helpful starter notes.
Here's an example of media queries:
/* the following rules will only apply when the browser width is between the following widths. You can change the min/max widths to suit your needs. */
#media all and (min-width: 640px) and (max-width:1280px) {
h1 {
font-size:16px; /* or whatever size and unit */
font-size:1.6rem; /* or whatever size and unit */
}
}
/* OR */
#media screen and (orientation: landscape) {
.element {
font-size:26px; /* or whatever size and unit */
font-size:2.6rem; /* or whatever size and unit */
}
}
Also, here are some media queries for standard devices.
Related
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I found that the collapsing menu in the Wordpress theme twentytwelve that transforms into a dropdown if the screen is too narrow is based on this conditional rule in twentytwelve/style.css
#media screen and (min-width: 600px) {
[css rules for actual elements if conditon above applies]
}
I currently build a child theme based on twentytwelve, where this min-width should be 885px instead of 600px.
Changing the value within twentytwelve would be easy, but isn't really a good style.
Neither would be to copy-paste the relevant css into the child and adapt it.
Is there an elegant way with pure CSS?
I'm rather certain that some workaround with a script would be possible
(yes, I am aware that there's a twentythirteen theme)
That is the pure CSS way, however...From my favorite theme, try responsive jQuery rules:
/*
Responsive jQuery is a tricky thing.
There's a bunch of different ways to handle
it, so be sure to research and find the one
that works for you best.
*/
/* getting viewport width */
var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
} /* end smallest screen */
/* if is larger than 481px */
if (responsive_viewport > 481) {
} /* end larger than 481px */
/* if is above or equal to 768px */
if (responsive_viewport >= 768) {
}
/* off the bat large screen actions */
if (responsive_viewport > 1030) {
}
Or your could hard code it into the template file by adding a style="" attribute and formatting the media query you have inside of it. This will make only that div in that template affected by the media query.
Say for example I had this:
#media screen and (min-width: 480px) {
.example {
background-color: red;
}
}
What if I view this page in Internet Explorer 8? Will it still color .example red even though the width is over 480px, or will it just ignore the stuff in the media query? (I can't test it because I don't have IE8 :P)
I've just tried it out in IE7/IE8 browser/document modes (IE10), and it completely ignores all CSS inside Media queries for me as I assumed it would do. .example turns out with a red background only in IE9+.
The only section in the specification I can find which is (probably) relevant to what actually happens here is the Error handling section.
I have seen many sites that are responsive both on desktop browsers and mobile phone browsers, I am working on a site and I have the following stylesheet setup: (The Hicks Design website is a good example of what I want to achieve if you need one)
/* Normal styles go here */
#media screen and (min-device-width:321px)
{
/* Styles */
}
#media screen and (min-width:701px)
{
/* Styles */
}
#media screen and (min-width:1025px)
{
/* Styles */
}
#media screen and (min-width:2049px)
{
/* Styles */
}
However my stylesheet above only seems to work on desktop browsers. (tested with Android Firefox and the default Android browser on a Sony Xperia Ray)
The Hicks design site's rules are very similar to mine, however they make use of min and max but either for me doesn't seem to work on both mobile and desktop browsers. (I plan on optimizing my media queries more I am just trying to get the basics to function as I want them to at the moment).
If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers...
I have tried the following following to get around the issue:
#media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
also:
#media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
However I don't think either of these are correct as the web developer toolbar for Firefox complains about it. I have also tried a few variations on the above rules but still can't get it to work.
From what I understand max-width reads the viewport width (say.. .the width of the browser window) and max-device-width reads the actual width of the screen you are using to view the site. - I'm confused why max-width doesn't seem to read the mobile's browser width.
I think I'm possibly missing something obvious about media queries here... It doesn't seem to make sense that if I want my site responsive on desktop and mobile browsers I must make a copy of all of my media queries and just change the query from 'screen and (max-width)' to 'screen and (max-device-width)' or vice versa. (which I'm ashamed to even type as a workaround here)
How can I combine the (max-width) and (max-device-width) rules or how can I achieve this?
If you'd rather not read all of the above:
I am using #media screen and (max-width:480px) however it seems only #media screen and (max-device-width:480px) works on mobiles. How can I combine both of these rules to achieve a responsive design on mobile and desktop browsers?
There are a lot of medias out there, and if you want to select only by its properties, use the all keyword:
#media all and (max-width:480px)
{
/* Styles */
}
Edit:
Combine rules with or:
#media all and (prop1:val1), all and (prop2:val2)
{
/* Styles */
}
Combine rules with and:
#media all and (prop1:val1) and (prop2:val2)
{
/* Styles */
}
#media screen and (min-width:240px) and (max-width:480px),
screen and (min-device-width:240px) and (max-device-width:480px)
{
/* Styles */
}
Resolved the issue, previous answers helped me so voted up. Thanks.
Is there some means of specifying the default media type for a browser (let's say chrome), so that I can test css #media styles?
#screen
{
div { background-color:red; }
}
#handheld
{
div { background-color:lime; }
}
<div style="width:100px;height:100px"></div>
Such that I could (without touching my code) test the two media types in the browser? Changing the media type would change the color of the div above. A chrome extension, a bit of javascript or some other magic would be greatly appreciated.
Could this be what you're looking for?
Web Developer extension for Chrome
The web developer extension has a feature called "Display CSS By Media Type". If this doesn't help you, you could always make one stylesheet per media type and use the import css statement to specify which type to load:
#import url("handhelds.css") screen;
Ilya on Stackoverflow wrote this answer, I found it easy and useful:
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
That's all!