I'm using the latest version of tailwind and I have a custom breakpoint, xs:, which is equal to 540px. When I use it like this: h-[420px] xs:h-[400px] xl:h-[360px] it works fine for mobile and the xs breakpoint, but the xl breakpoint no longer registers- the height is 400 even on desktop.
This is my config:
theme: {
extend: {
screens: {
'xs': '540px',
...
Unfortunately, this works in the sandbox here and I'm not sure why it doesn't work on my local. I'm using Sveltekit (a version before the breaking changes), Ubuntu Linux and Chrome.
not sure which version of tailwind you're using, probably a version number would help, but in the latest version of tailwind, you cant simply extend smaller breakpoints because the new breakpoint will be added at the end of the breakpoints list.
If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.
Instead, override the entire screens key, re-specifying the default
breakpoints:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
screens: {
'xs': '475px',
...defaultTheme.screens,
},
},
plugins: [],
}
you can read more here : https://tailwindcss.com/docs/screens#adding-smaller-breakpoints
Standard CSS3 give us to max and min values for responsive behaviors.
But tailwind responsive behaviors set as default for only min size.
what it mean ?
if you add one more responsive behavior point...
you must stop that 'xs' behaviors with sm:h-[360px] or md:h-[360px].
if you don't understand this answer, i can give you more details about it.
But please add your code more with details.
Related
In Tailwind Officail docs, there are lots of width utilities we can use.
However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)
I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.
I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.
If I can just do w-600px would be nice, or am I missing any other better approach?
If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode
For example, I needed a width of 600px, here is how I specified it:
h-[600px]
Can you please check the below code? Hope it will work for you.
#1 You need to add the below code in tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'600': '600px',
}
}
}
}
#2 After that you can use w-600 in your HTML file like below.
<div class="w-600">...</div>
You were just missing the brackets [ ]. Try this:
w-[600px]
Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.
Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values
If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="w-[600px]">
<!-- ... -->
</div>
I developed an extension for Firefox with an option popup for preferences.
On mobile, as it doesn't open as a popup but as a new tab moz-extension://(...)/popup.html, I had to apply some specific CSS media queries.
But as you can see below, it's definitely not working.
What should I do ?
CSS page is here https://github.com/ANN-MB/LEIA/blob/master/extension%20firefox/leia.css
I solved the problem.
It wasn't about media queries but because my manifest.json looked like this :
"options_ui": {
"page": "config.html",
"browser_style": false,
"open_in_tab": true
}
It seems that when open_in_tab is set to true, the Firefox Mobile Browser opens the option page with the desktop display (don't ask me why).
So turning "open_in_tab" to false gave me the good render.
But you need #media querys for wanted solutions! Your Medium is provide an max range of size, you only need is to declare your style on diffents sizeranges:
#media(min-width:XXXpx) {
// your style here
}
for more information take a look at this: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
This seems to be some css issue and some guru would know how to fix right away.
I am using https://github.com/kekeh/mydatepicker which works as i require except i need to make some layout changes to the input box.
i am able to see desired changes if i do that in the chrome browser via developer tools but not able to get them working by applying the css.
so if you take a look at the screenshot:
https://www.dropbox.com/s/2dhri8ylss3pfgd/Screenshot%202017-09-30%2018.27.41.png?dl=0
i need to set the height to 25px rather 34px.
try to override class like .selectiongroup etc. doesnt help
you should use the height attribute to override input height.
private myOptions: IMyDpOptions = {
firstDayOfWeek: 'su',
editableDateField: false,
openSelectorOnInputClick: true,
height: '25px'
};
<my-date-picker [options]="myOptions" [(ngModel)]="XYZ" (dateChanged)="XYZ($event)"></my-date-picker>
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
When you start a new project in Sencha Architect, it gives you this off white background (#eeeeee). Naturally, like any site or app, you can swipe higher or lower than the actual content, so this off white color shows.
I want to change this background color. I'm able to change the Containers or Panels so that isn't the problem. I also tried applying a Cls to the Viewport or using the Style or HTML config of the Viewport with no luck.
Does anyone know the Cls for this so I can override it or have any other ways to do this? It's like it's the final background behind everything.
There's one css var defined to change default background color. It's $page-bg-color.
You can find it inside nearly at bottom-
....\touch\resources\themes\stylesheets\sencha-touch\default_variables.scss
Default value is set for #eee. As it's a css var, it might have referenced in various places. So adding a class with custom background to each and every element will not be good. Better override it through scss itself.
You'd need to define your own *.scss file and compile it. In this *.scss file, you can override almost every css property. In your case, set $page-bg-color:#whatever and recompile it.
Hope you are familiar with using compass and scsss, if not then there's quick start guide on http://vimeo.com/36917216.
If you wants to use Cls means
Ext.define("VUCFyn.view.MemberHome", {
extend: 'Ext.Panel',
xtype: 'memberhome',
fullscreen:true,
config: {
cls : 'booked-seats', // inside config use like this
and You have specify the design in index.html file
.booked-seats {
background-color: #DEFCE2;
},
Try it will work .. i tried like this..