I can't figure out why the responsive overrides of tailwind are not working in my project.
For example, I'd like the following text in div to be centered below the small screen breakpoint and left-aligned above the sm breakpoint. The following code seems to work when I try it in Codepen. However, it does not work in my laravel project.
<div class="text-grey-4 flex-1 px-6 sm:text-left text-center self-center">
<h2 class="h2"><b>Heading Text</b></h2>
<div>
Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum
</div>
</div>
Any ideas why this doesn't work in my Laravel project?
The problem is: Tailwind is a mobile-first framework as here, which means that the unprefixed class props will be used as mobile style, and the style of the prefixed(starting with sm, md, lg) will be used for that screen breakpoint and above (NOT BELOW)
So in your case it should be in the opposite way
class='text-left sm:text-center'
Every time you design something with Tailwind, start from mobile.
<div class="text-center sm:text-left">
Lorem ipsum dolor sit amet.
</div>
So basically on this example. Instead of saying:
Text should be centered only on smaller devices.
Do this:
Text should be always centered, and aligned left for bigger devices.
https://codepen.io/anon/pen/wLeoYV
If you are overriding the default breakpoints in tailwind.config.js file, be sure to follow ascending order of the screens values (from smallest to largest viewport):
module.exports = {
theme: {
screens: {
'sm': '576px',
'md': '960px',
'lg': '1440px',
},
}
}
This is important because the CSS cascade will be created in the same order. Larger breakpoints will override smaller ones.
sm dont work . design for mobile then modify code using md and lg for larger screen
Related
I just created a classified ads website which has some items on the homepage, and i want to make it equal for the column height. It works well on the desktop version, but doesn't work for the mobile. I tried to use display: grid; to make it equal, but it doesn't work. Is there any other way how to resolve this?
you can use max-heigh and min-height to put some exact limitation for you divisions
something like this:
main{
width: 300px;
height: auto;
background:red;
}
.tstbx{
width:100px;
background:yellow;
max-height:120px;
min-heigh:120px;
overflow:scroll;
margin:10px;
display:inline-block;
}
<main>
<div class="tstbx">
<a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
<div class="tstbx">
<a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
<div class="tstbx">
<a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
</main>
I am using BS3 and need to have 2 columns with column 1 sticky whilst the second scrolls as normal - this works fine using class affix on the 1st column but that column never fills the full width hence it doesn't have the correct borders, background etc as the rest of the content.
I have read a few answers which explain this is because fixed takes the content out of the normal flow of the page - some suggestions have been to use width: inherit and I have tried a few JS options I found in various answers but none work for me. Likewise making column 1, 100% makes it full the whole area and clash with the 2nd column
Is there a simple way in BS3 of having a fixed left column with a normal right column where both columns fill to their full width?
<div class="row">
<div class="col-lg-3">
<div class="panel panel-flat affix">
<div class="panel-body" style="background-color:red">
1 of 2
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-flat">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare ipsum vitae
</div>
</div>
</div>
.col-lg-3 {
width: 25%;
float:left;
}
.col-lg-6 {
width: 50%;
float:left;
}
https://jsfiddle.net/6bwkzd5y/1/
Bootstrap Affix uses position: fixed to display a block statically, and fixed positioned elements don't listen to the parents positional styles to display. To make this work, I added a custom class inherit-width and the style width: inherit. Optionally, if you want to make all .affix elements have this, you can just do that with some simple CSS: .affix { width: inherit; }.
Here is the updated jsfiddle:
https://jsfiddle.net/dx70wv95/2/
I'm trying to use <img> within mdl-card__supporting-text but if the image is bigger than the card, the image would not scaled to fit within the card's supporting text area. See the codepen for example. See how the right side of the image is covered up.
I'm not expert in css and mdl. I have also tried to search for a solution and didn't quite find one that would work. If anyone has an idea, I would really appreciate if you could give a helping hand. Thanks.
For me this simple snippet worked:
img {
height: auto;
width: 100%;
}
But if you will have more than just this image, you should consider using a class for this.
.card-img {
height: auto;
width: 100%;
}
And for better overview you should use the .mdl-card__media class on a div as the container, if you are trying to make a layout like this.
<div class="mdl-card mdl-shadow--2dp demo-card-square">
<div class="mdl-card__media">
<img src="http://placehold.it/400x300">
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
In Zurb Foundation 4, is there a way to automatically switch to the smaller button style when the browser is resized smaller or on a smaller screen?
For example when the screen is a standard desktop screen do this:
Button 1
When the screen is resized smaller, do this:
Button 1
I have a button group of 6 buttons in a horizontal row and would like to use the small button class when the screen is resized smaller and the medium button class when the screen is "standard," is this possible?
This can be accomplished with Sass/Scss mixins and media queries. In your app.scss:
$medium-up: "only screen and (max-width:"#{$small-screen}")";
#media #{$small} {
.responsive-button {
#include button($button-lrg, $primary-color, 0px, false, false, false);
}
}
#media #{$medium-up} {
.responsive-button {
#include button($button-sml, $primary-color, 0px, false, false, false);
}
}
Just use the .responsive-button class we just created. Here is an example:
<div class="row">
<div class="small-8 large-8 columns">
<ul class="button-group round">
<li>Lorem</li>
<li>Qui</li>
<li>Voluptatibus</li>
</ul>
</div>
<div class="small-4 large-4 columns">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
This can be applied to any of the other Sass mixins described in the Official Zurb Foundation Documentation. Look at Media Queries and scroll to the bottom of the Buttons page.
I am planning to use a Grid system for a site, but I'd like to be able to break the grid selectively. This would mean, for example, turning an OOCSS size1of2 into a size1of1). Ideally, the html would look something like this:
<div class="line">
<div class="unit size1of2 respond-480">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="unit size1of2 respond-480 lastUnit">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Then I'd have something like the following css:
#media screen and (max-device-width: 480px) {
.respond-480 {
/* something to linearize the box */
}
}
Does anyone know of a way to do this with OOCSS, or another grid system? I'm looking for this level of control, as opposed to a simpler responsive grid.
Turns out it makes more sense to add the respond480 class to the line rather than the unit. Not surprising. The following code works rather well for modern browsers. I used the child selector to simplify things -- though it may be possible to do a workaround, older browsers (IE<6) don't support these media queries anyway.
#media screen and (max-width: 480px) {
.respond480 > .unit {
width: auto;
float: none;
}
}
I was digging through the OOCSS source, and came across grids/grids_iphone.css. This lends some credibility to my strategy. Anyone know if !important is mandatory? Selectivity seems work for me without it -- probably due to the two class selectors.
#media screen and (max-width: 319px) {
.unit {
float: none !important;
width: auto !important;
}
}
And here's a page showing it in action. I used Nicole Sullivan's grid test from Arnaud Gueras, but with more filler text. Note that I left one 2of2 segment purposefully un-linearized, to demonstrate that it's not necessary to linearize everything.
Because she said to avoid !important unless it's a leaf node at Velocity conference, it's odd how she would put that in her code.
Check out Cascade Framework. It has an OOCSS architecture and supports responsive design out of the box (although it is optional and can be left out if you want).
With Cascade Framework, you'd implement your example like this :
<div class="col">
<div class="col size1of2">
<div class="cell">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="col sizefill">
<div class="cell">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>