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.
Related
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.
I have a menu bar for the main site which has a lot of CSS, but for smartphone users I want to completely redesign the menu bar. I am doing this by using #media only screen and (max-width: 767px) {} and changing the properties of the classes there, however everything is being inherited from the original class and it's a real pain to reset every single property on every class manually.
So I was wondering if there is an easy way to reset a class in CSS when using #media only screen and (max-width: 767px) {}
There is a property called all for resetting all CSS properties.
.classname {
all: initial; /* or unset */
}
initial - This keyword indicates to change all the properties applying to the element or the element's parent to their initial value...
unset - This keyword indicates to change all the properties applying to the element or the element's parent to their parent value if they are inheritable or to their initial value if not...
Browser support: Chrome 37+, Firefox 27+, IE 11+, Safari Not supported
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/all
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.
My page presents a form that breaks from horizontal to vertical at #screen-tablet which is around ~ 760px. an A4 page width is around ~600px.
In my print.css I'm shrinking all the text, e.g, font-size:85% so that all default font sized 14 will print at around 12. I also want to display the format
and it's horizontal state, meaning - viewport > 760px. Problem is that the print layout sets the page width at A4 ~600px causing the form to display vertically.
Is there any way to "fool" the layout into thinking it's more than 760px?
(I'm hoping for an answer that doesn't require setting a whole new layout for print - just making it look as it would on desktop).
Use the transform property with a media query print type such as:
#media print {
html {
transform: scale(0.8);
}
}
This will allow you to scale the document without reflow of content.
CODEPEN Example
transform Functionality Explained
For this, you can use the #media followed by any of these
#media screen, #media print,#media screen, print
By defining the state of any style at the time of paint you can define every rule on #media screen, print which can work for the range in the document.
Like you want to freeze the viewport to 700px then you can define the #media print rule for #media screen,print and (min-width<=760px) { body,html{ min-width:700px;max-width:700px; }}.
which define and set your viewport to a specific point.
Note: This rule can also be used for other work like transform and
zoom as an aspect.
I handled this via defining separate CSS Rules for print.
You have two options either through JavaScript or with Media query.
function printForMe()
{
var mywindow = window.open('', 'Print Proposal', 'height=400,width=600');
mywindow.document.write('<html><head><style>div{font-size:7pt;display:block;}body{padding:10pt;} .xt-print-box{page-break-inside: avoid !important;} a[href]:after { content:none !important; }</style>');
mywindow.document.write($("head").html()); //Skip this line if you want to completely rewrite the styles and scripts therein header.
mywindow.document.write('</head><body>');
mywindow.document.write($("#myContent").html());
mywindow.document.write('</head><body>');
mywindow.print();
}
#media print {
div{font-size:7pt;display:block;}
body{padding:10pt;}
.xt-print-box{page-break-inside: avoid !important;}
a[href]:after { content:none !important; }
}
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.