I am trying to achieve a layout in Tailwind similar to Bootstrap where one of my columns inside a Container has no auto margin. Example of the CSS in bootstrap. Can anyone offer a similar workaround in Tailwind?
#media (min-width: 994px) {
.section-full-width-right > .container > .row > .col-lg-6:last-child {
position: absolute;
left: 50%;
}
}
#screen md {
.section-full-width-right > .container > .row > .col-lg-6:last-child {
#apply absolute left-half;
}
}
And make sure you change your inset attribute into
inset: {
0: "0",
auto: "auto",
half: "50%"
}
in the tailwind.config.js file.
Related
I have build a custom grid with the following below similar to what is found on Creating Your Own CSS Grid System.
When I try to display four items in two rows as two columns in each (tablet-col-6), the first two items will be aligned properly, but the third item will be misaligned and the fourth item is on another row. It is mainly due to the fact that the columns have different heights for each column. Using Bootstrap's grid system is not an option.
How can I resolve this issue?
.container {
width: 100%;
max-width: 1200px;
}
.container * {
box-sizing: border-box;
}
.row:before,
.row:after {
content:"";
display: table;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding: 16px;
}
#media screen and (min-width: 320px) {
.mobile-col-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.tablet-col-6 {
width: 50%;
}
}
#media screen and (min-width: 1200px) {
.desktop-col-12 {
width: 25%;
}
}
.border {
border: 1px solid black;
}
<div class="container outline">
<div class="row">
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Compellingly expedite intermandated paradigms via out-of-the-box architectures. Enthusiastically transition vertical networks after multimedia based best practices. Completely predominate principle-centered.</div>
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Enthusiastically benchmark cooperative information through proactive methods of empowerment. Completely syndicate alternative.</div>
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Progressively recaptiualize quality convergence through extensive innovation. Uniquely utilize.</div>
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Proactively pursue quality leadership skills with innovative processes. Quickly actualize dynamic.</div>
</div>
</div>
Current output
Desired output
A couple of things need to be fixed:
The selectors in the the media queries are missing . e.g. replace mobile-col-12 with .mobile-col-12
Clear the floats on every first item of the row. And you must cancel the previous clearings within different breakpoints if needed.
Below is the updated part of media queries:
#media screen and (min-width: 320px) {
.mobile-col-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.tablet-col-6 {
width: 50%;
}
.tablet-col-6:nth-child(2n + 1) {
clear: both; /*clear floats*/
}
}
#media screen and (min-width: 1200px) {
.desktop-col-3 {
width: 25%;
}
.desktop-col-3:nth-child(n) { {
clear: none; /*cancel clearing*/
}
}
codepen
Floats are outdated for creating layout, consider using Flexbox, CSS Grid instead.
Let's try a simple experiment that adds flexbox-based equal-height columns to Bootstrap's grid system.
The row uses the custom .row-eq-height class defined in this example's CSS to make all of its columns automatically be of equal height.
All of the columns will stretch vertically to occupy the same height as the tallest column , so the next one will be perfectly left aligned.
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
I have some elements inside a DIV which get reordered depending on the size of the screen. I want to style each of these elements differently depending on their flex-box order. Because the media queries are inside a framework, I'd rather not write my own media queries to do this, because I don't want to have to remember to change my media queries if the framework changes the break points for their media queries. I tried using the + sibling selector, but apparently this only applies to the order of elements in the original markup, not the flex box rendering order. Is there any way to style an element based on the order in which it appears in the rendered DOM?
As mention in the comments, you wont be able to use nth-child, as the styles will apply to the order of the actual DOM, not the rendered DOM.
You will have to add extra classes to the markup in order to do this.
So rather than re-order using nth-child, re-order using the extra classes.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexGrid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.flexGrid__item {
border: 1px solid pink;
width: 50%;
height: 100px;
}
.flexGrid__item--alpha {
background: pink;
order: 1;
}
.flexGrid__item--bravo {
order: 2;
}
.flexGrid__item--charlie {
order: 3;
}
.flexGrid__item--delta {
order: 4;
}
#media screen and (min-width: 500px) {
.flexGrid__item {
width: 25%;
}
.flexGrid__item--alpha {
order: 5;
}
}
<div class="flexGrid">
<div class="flexGrid__item flexGrid__item--alpha"></div>
<div class="flexGrid__item flexGrid__item--bravo"></div>
<div class="flexGrid__item flexGrid__item--charlie"></div>
<div class="flexGrid__item flexGrid__item--delta"></div>
</div>
More detail in this fiddle:
https://jsfiddle.net/pua5u8a4/1/
Many site designs call for a dark background with a lighter foreground page that contains the site's content. When using Bootstrap, it seems logical that one would merely apply the light color to the .container div and be done with it. However, Bootstrap's container does not provide any padding between its edges and the columns within, so this solution provides a light background but with the column content flush with the edges - not a good look.
This is a common problem and there are several solutions on stackoverflow and elsewhere for Bootstrap 2, but I couldn't find anything useful for Bootstrap 3.
One of the Bootstrap 2 solutions involved using .container-fluid which switches the internal grid from pixel to percentage based. Then one may apply padding to a a background div within .container-fluid and the internal columns will seamlessly adjust to fit. This seemed like a good approach, but the specific CSS used to tweak some of the other styles didn't work with Bootstrap 3.
After digging through the Bootstrap source, I noticed that the only difference between the .container and .container-fluid rules, in grid.less are three media queries. I wrapped my page's content in .container-fluid then overrode its definition with one that included the media queries so that the page content would respond the same as the header and footer, which use the standard .container.
Here's the HTML:
<html>
<head>
<title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
<div class="page-container">
<div class="container-fluid">
<div class="page-bg">
<!-- PAGE CONTENT -->
</div>
</div>
</div>
</body>
</html>
And then the .less:
.page-container > .container-fluid:first-child {
.container-fixed();
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
Then added padding to the .page-container div:
.page-container {
.page-bg {
padding: 15px;
background-color: #EFEFEF;
}
}
body {
background-color: #333
}
This seems to work. I haven't completed the styling for the interfaces that will reside within this container yet so there could be issues down the road but everything seems to render fine so far.
Here is a working example of this solution on codepen.io.
Note that the solution above uses less.css after including Bootstrap's variables and mixins .less files. Here's the compiled CSS:
.page-container > .container-fluid:first-child {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.page-container > .container-fluid:first-child {
width: 750px;
}
}
#media (min-width: 992px) {
.page-container > .container-fluid:first-child {
width: 970px;
}
}
#media (min-width: 1200px) {
.page-container > .container-fluid:first-child {
width: 1170px;
}
}
.page-container .page-bg {
padding: 15px;
background-color: #EFEFEF;
}
body {
background-color: #333333;
}
just using min-width I would like to hide challange-target element below 408px and show the challange-target up to 408px.
I tried this code but it does not work:
#media only screen and (min-width: 408px) {
.challange-target {
display: block;
}
}
Any ideas?
Here is the jsfiddle link
You mean you want to hide .challenge-target when screen width < 408, and show it at 408px when screen width is >= 408px?
smallest first; hide that elem
.challange-target {
display: none;
}
#media only screen and (min-width: 408px) {
.challange-target {
display: block;
width:408px;
}
}