Reading https://tailwindcss.com/docs/responsive-design#overview docs
I do not see any classes for extra small devices(like iPhone 5)
So if I need to made different design for iPhone 5 and nexus 7 is there is a way to make it with
tailwindcss ?
Thanks!
What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.
e.g. text-xs sm:text-base md:text-lg. In such case font-size will follow:
text-xs: All the screens starting from 0px to 639px will follow this. font-size: 0.875rem;
sm:text-base: All screens starting from 640px to 767px will follow font-size: 1rem;
md:text-lg: All screens starting from 768 to 1023 will follow font-size: 1.125rem;
So your iPhone 5 being 320px will follow text-xs. And your Nexus 7 width 600px will still follow text-xs.
If you still want to add additional screens then you can do:
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xxs': '540px', // min-width
},
}
}
e.g.
text-xs xxs:text-sm
screens will follow text-xs till 539px then Nexus 7 will follow text-sm till 639px.
Related
I've been working with tailwind in my Vue project and overall its really good, but its a bit annoying to always write sm:w-10 lg:w-10 2xl:w-30 (etc) for all of my classes.
So I was thinking, since the width is based on rems, wouldn't it make more sense to just update the root font size (which determines rem value) at the lg xl 2xl breakpoints, rather than resetting them on each tag?
I think I could achieve that with something like this on the root component:
html { // changed from body to html
font-size: 16px;
#media screen and (max-width: 1024px) {
html {
font-size: 24px;
}
}
But I'm skeptical about doing this as the Tailwind docs don't mention it at all. Can anyone tell me if/why this would be a bad idea?
Just add it to the parent class then everything under applies the same text modifiers.
Eg below increases the size of text as the screen width goes up for all child divs
<div class='text-base md:text-lg lg:text-lg xl:text-xl'
... All text content inside here will responsively change size
</div>
See below links for more info
Font Size
Responsive Design
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.
After doing some research, I opted for using vw units to scale my responsive typography.
%meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "viewport"}/
css:
html{
font-size: 1vw;
}
// h4 tag above form
h4{
font-size: 1.60rem;
text-align: center;
}
//form width
.e2ma_signup_form {
margin: 0 auto;
width: 36rem;
}
#media screen and (max-device-width: 480px){
html , body{
-webkit-text-size-adjust: none;
}
}
The above shows how I have the root set to 1vw, then i have an h4 tag above a form.
On desktop, i have the length of the text in the h4 tag matching the width of the form (shown in pictures below).
My problem though, is that that on ios, the font does not seem to calculate the same way. Most obviously, where the h4 tag exceeds the width of the form. Seems to work correct on Android.
What could be causing this, and how do I resolve it?
On desktop / chrome emulator (correctly aligned for iphone 6).
On desktop / chrome emulator
on ios, both safari and chrome
on ios, safari and chrome
I have tried to solve this problem too, when I tried to imitate the old-school Flash scaling. I found out that making the font-size relative is not the way to go (although this is how it SHOULD work).
My solution uses javascript/jQuery:
$( window ).resize(function() {
var w = $( window ).width();
var h = $( window ).height();
var wspec = parseInt($( "#innerbody" ).css('width'));
var hspec = parseInt($( "#innerbody" ).css('height'));
if((w/h)>(wspec/hspec)) var scale = h/hspec;
else var scale = w/wspec;
$( "html" ).css('transform','scale('+scale+')');
$( "html" ).css('-ms-transform','scale('+scale+')');
$( "html" ).css('-webkit-transform','scale('+scale+')');
$( "html" ).css('-moz-transform','scale('+scale+')');
});
For a full demo, see this page: http://apps.usecue.com/viewport/flashscaling.html
It's normal that the result is not the same on desktop and mobile as your font-size is based on the viewport width (which is different from mobile to desktop).
If I understand your problem correctly you want your h4 text to never be wider than your form, is this correct? In this case you can't do it in CSS, you need Javascript. You can try Flowtype or FitText (both require jQuery) as they are the ultimate solution for this kind of problems.
You might also be interested in this article about using viewport unit for typography which explains why you can't based your html on viewport unit only (use percentage + viewport unit to define a minimal size).
The last recommendation I can give you is to not use user-scalable. There is a great discussion here on SO about this topic.
As Marco said, browsers render fonts differently.
From your screenshot, I can see that the one from iOS has wider letter spacing. If I were you, I would target the caption line on iOS with something like this:
.caption {
letter-spacing: -1px;
}
From my guts:
Looking at the first screenshot the viewport is as wide as the form element. Thus the text (being set in vw = viewport-width) renders as you expect it.
As soon as the viewport is wider (in the second screenshot there's something behind the form) the text-box becomes wider as well (relative to the viewport width.
Would it help to set the width of the form in vw as well?
On top of that you will always have minor inconsistencies across browsers because they render fonts very differently. Especially Firefox on Mac OSX is so different to all the other browsers on the same machine. So be aware of that as well (shouldn't be too much of an issue compared to yours though).
Edit: On second thought it could also be related to the pixel density of the actual iPhone 6 compared to the emulated version in Chrome (which maybe happens on a different screen with a different pixel density?). That's something OP has not yet mentioned.
According to the table at http://viewportsizes.com/?filter=iPhone%206 the actual iPhone 6 has 375px across in portrait mode. Does that match with the emulation in your Chrome?
Edit2: Data from the actual Apple homepage tells a different story of 1334 x 750 Pixel at 326 ppi!!! So you're not dealing with 375 Pixels but double the number of pixels on the actual device compared to the real 375 pixels on your screen emulating the device.
// We use these to control header font sizes
//for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
In bootstrap button with class "navbar-toggle" in navbar appears when screen less 768px, i.e. 767px. But but ipad mini has screen with dimensions 768-1024px.
Should i override bootstrap style from 768px to 992px, like this:
#media (min-width: 992px){
.navbar-toggle {
display: none !important;
}
}
You should not change the bootstrap file itself, but it would be advised if you really need to do this to add the extra dimensions to your own custom css file which will over-write the bootstrap lib file.
Its perfectly ok to overwrite bootstrap but personally i would specify the MIN and MAX width to ensure you are catering for that particular edge case.
http://getbootstrap.com/2.3.2/scaffolding.html
At bottom of the page you can see classes like .visible-phone, .visible-tablet, .visible-desktop and their behavior at some sizes.
I'm working on this site:
http://stephaniebertha.com/indev/solartrak/
And I seem to be having a problem with breakpoints and general width responding to the layout. When you resize it and it starts to get down to 780 width, the layout breaks and it looks weird (the menu goes to a light gray color).
These are my media queries in custom.css (and in this order):
max-width: 480px
min-width: 481px
min-width: 769px
Is this correct? Should I be doing them in this order? Any help you can throw my way would be helpful. Thank you!
I think you need to reorganize your css thinking better the rules which ones you want for all devices sizes and which ones you don't
Example
in your custom.css you have this rule
#media only screen and (min-width: 769px) {
.navbar-default {
background: none;
border: 0 !important;
}
header.main {
height: 42px;
background: #f7941d;
}
the color of the nav bar shoul not be inside a #media rule thats why your nav get grey is smaller screens
and also read the documentation of the bootstrap grid it will help you a lot
Breakpoints for Bootstrap 3 can be customized here:
http://getbootstrap.com/customize/
Under the headings 'Media queries breakpoints' and 'Layout and grid system'... It's a good idea to use a custom version so that you're choosing which files are relevant to you, and are compiling your own custom build of Bootstrap.
You can look inside your bootstrap.css file to find out where the breakpoints are set. If you use the same ones in your stylesheet the breaks should match up!
// Your link isn't live any more so I'm afraid I can't answer questions about that.