I have the following code.
<section class="visit-section mb-7 mt-7 mb-sm-3 mt-sm-3 nb-md-5">
</section>
In the developer tools in Firefox, when I select the element with the picker, it doesn't seem to be recognizing the class mb-sm-3 or mt-sm-3. In other words, the spacing that it is adding is from mb-7 and mt-7. After looking for 30 minutes, I'm not entirely sure why this is happening. :-\
Did I understand it wrong from the Bootstrap 4 manual?
Bootstrap Manual
The idea you have should be working well, but a couple things I noticed on you code that are preventing it to function properly:
Bootstrap's spacing utilities go from 0 to 5, as in mb-0 | mb-5, there's no mb-7 unless you specify so yourself. See here
Keep in mind that sm breakpoint applies to smartphones in landscape orientation; so maybe you are not triggering the correct breakpoint yet
If you try the code below in full screen, you can see that the margins actually change when you resize the browser window; all I did to your code was changing the mb-7 classes to mb-5 and fix a typo on the last class you had as well
section {
height: 100px;
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>
<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>
Related
I'm creating a page where I have a parent div which encapsulates multiple child divs from different components in a NextJs project.
I have a preview option where my customers can preview their changes in mobile and desktop view.
I'm able to switch to mobile view using iframe. I want to achieve this without using an iframe.
Even though I change the parent div max width, because the rest of components have sm md lg xl which are taking the values from the view port instead of the parent div I'm unable to solve it.
What should be the approach to solve this?
The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to give an attribute to the last of them [&>div:last-child]:bg-blue-500 , if you want to make it responsive, max-md:[&>div:last-child]:bg-blue-500 you have to express. I have prepared a demo for you to make it more meaningful, you can check it from the link below. If you expand the preview screen on the right a little, you will see that the colors have disappeared. I hope it can solve your problem.
Demo Code
Not sure what you meant complelty
<div class="max-w-full sm:max-w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
For small screen sizes
</div>
<div class="flex-sm-row sm:flex-row md:flex-col lg:flex-col xl:flex-col">
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
</div>
<div class="hidden sm:hidden md:block lg:block xl:block">
For large and extra-large screen sizes.
</div>
</div>
Media breakpoints allows you to change content appearance based on viewport size. Tailwind's media variants like md:, lg: etc based on them. In order to change content based on parent's size you should use CSS Container Queries. Be aware - they are not production ready - about 75% browser support (actual at December 2022)
Container queries allow us to look at a container size and apply styles to the contents based on the size of their container rather than the viewport or other device characteristics.
Tailwind has official plugin which may help you with it. Install it configure within tailwind.config.js
module.exports = {
plugins: [
require('#tailwindcss/container-queries'),
],
}
You need to add #container class to a parent container and use size modifiers on element you need like #md:bg-blue-500.
<div class="#container max-w-full resize-x overflow-auto">
<div class="p-16 #md:bg-blue-500 bg-amber-400">
Resize me
</div>
</div>
This way element should be yellow unless container size is bigger than 28rem and it will become blue no matter viewport size
Produced CSS is
#container (min-width: 28rem) {
.\#md\:bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
}
Check other modifiers here. Please note md:flex and #md:flex are different sizes which may confuse at first
#containers supports labels so you can name containers and specify different CSS for them. Let's say you have reusable component (common situation) you include within loop
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
</div>
So within #container/aside element your card will be red after #4xl (56rem) size, while within #container/primary - yellow after #3xl (48rem).
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
YELLOW
</div>
</div>
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
RED
</div>
</div>
As I said it's not production ready. The way you want to handle unsupported browsers is up to you. First one - use polyfill. Just add
<script src="https://cdn.jsdelivr.net/npm/container-query-polyfill#1/dist/container-query-polyfill.modern.js"></script>
and it should be enough. However read full docs to improve user experience. I didn't fully tested it myself so cannot guarantee it is 100% solution
Second way is to check does browser supports container queries or not. You can check it via JS
if (!("container" in document.documentElement.style)) {
console.log('No support')
// Do something in that case
}
Another way - via CSS #supports rule
#supports (container-type:inline-size) {
/** Container queries supported */
}
Tailwind has supports: variant for that needs so something like this would work
<div class="supports-[container-type:inline-size]:hidden">
Your browser does not support container queries
Maybe show iframe element as backup (?)
</div>
<div class="supports-[container-type:inline-size]:block hidden">
Here is my cool feature which will be hidden if browser does not supports container queries
</div>
I've created this demo playground without polyfill to check different cases depends on container and window size plus different types of container and browser support
A solution to this can be adding a w-screen to parent div.
Use w-screen to make an element span the entire width of the viewport.
Documentation
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
I'm using the Blueprint CSS framework to develop my website to ensure cross-browser compatability...except, it looks completely different in IE.
The site is http://rtwilson.com/academic-new/ and looks fine in Firefox and Chrome, but completely messed up in IE. The main body is not centred, the image is in the wrong place and the text is rather weird.
Does anyone have any idea how I can sort this? I thought the whole point of Blueprint et al. was that it sorted the problems with cross-browser (particularly IE) compatibility. I have included the correct IE style file - so any other ideas?
Blueprint is fine (although I have recently switched to Twitter Bootstrap)- regardless of the complexity of the site, and it does do all of the things for you, as long as your markup is correct and the classes are used correctly.
One place to start, other than the doctype (which should be added, as well - as mentioned by Michas), would be to add a "last" class to the div that contains your navbar div. The way you have it written right now is that you have a span-24, containing another span-24 immediately followed by a span-15 and a span-9.
You have:
<div class="span-24 last">
<div class="span-24">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
You should have:
<div class="span-24 last">
<div class="span-24 last">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
As it is written now, I would not be in the least bit surprised that IE can't figure out that there shouldn't be 48 spans in a single row.
If I am being honest, I wouldn't use blueprint css - a site simple as yours I would simply just create a seperate stylesheet for IE, and link it like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->