I'm building a site with susy to allow flexibility with the grids I need, I have not set any settings at the moment so Im only using the defaults.
I want to be able to change the gutters (make them smaller) for a section of the site.
I built it out here:
http://sassmeister.com/gist/89243b68852fdd9cf282
SCSS
.feature-box-container
{
#include container(80em);
.feature-box
{
#include gallery(4 of 12);
img
{
margin-bottom:20px;
width: 100%;
}
}
}
HTML
<div class="feature-box-container container">
<div class="feature-box">
<!-- 450 -->
<div>
<img src="http://placehold.it/355x170" alt="">
</div>
<div>
<img src="http://placehold.it/355x280" alt="">
</div>
</div>
<div class="feature-box">
<div>
<img src="http://placehold.it/355x317" alt="">
</div>
<div>
<img src="http://placehold.it/355x133" alt="">
</div>
</div>
<div class="feature-box">
<div>
<img src="http://placehold.it/355x270" alt="">
</div>
<div>
<img src="http://placehold.it/355x180" alt="">
</div>
</div>
</div>
In the picture it has the sites default, but I need only this section to have at least half the gutter width it has now.
You can use the with-layout mixin to [change your grid settings for a nested block of code]](http://susydocs.oddbird.net/en/latest/settings/#with-layout).
#include with-layout($new-settings) {
// code you want affected...
}
Related
No matter what I've tried to either target or exclude the first li div, nothing works. I tried :not(and different variations of the selectors here) but that didn't work. On one occasion, the result rendered as though looking into a mirror that's facing a mirror. No bueno. No classes or ids can be added--representative example below.
ul {
list-style-type: none;
}
.message-content-wrap {
background-color: red;
}
<ul id="thread-list" class="group-message-thread">
<li>
<div class="message-wrap group-messages-highlight">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the first message</p>
</div>
</div>
</div>
</li>
<li>
<div class="message-wrap">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the second message</p>
</div>
</div>
</div>
</li>
<li>
<div class="message-wrap">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the third message</p>
<p>some text</p>
</div>
</div>
</div>
</li>
<li>
<div class="message-wrap">
<div class="avatar-wrap"></div>
<div class="message-content">
<div class="message-content-wrap">
<p>This is content in the fourth message</p>
<p>some more text</p>
</div>
</div>
</div>
</li>
</ul>
Any ideas would be most welcome. My attempt in jsfiddle
a few ways to style child elements
ul > li:not(first-of-type) {
// styles go here
}
ul > li {
// styles go here
}
ul:first-child {
}
li + li {
}
I added <meta name="buildfire" content="disableTheme"> to the HTML of my Buildfire plugin. It did indeed disable the theme CSS however it also is now preventing normal scrolling of the page. This is a simple HTML/CSS/JS plugin with no external frameworks. This is for the widget. Using BuildFireSDK version 1.15.3
The scrolling works correctly on my local environment in the plugin tester. But it does not work correctly when the plugin is loaded into a user's Control Panel or when a test app is loaded onto a device.
Is there a way to disable the theme styling but allow for normal scrolling?
Edit: I removed all the extra classes, styling and script tags from the HTML. It still does not scroll.
<html>
<head>
<meta name="buildfire" content="disableTheme">
<title>Test</title>
<script src="../../../scripts/buildfire.js"></script>
</head>
<body style="overflow-y:scroll;">
<div style="overflow-y:scroll;">
<div class="container" style="overflow-y:scroll;">
<div>
<div>
<h1>Test</h1>
</div>
</div>
<div>
<div>
<form>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
<div>
<div>
<h2>Test</h2>
</div>
</div>
</form>
</div>
<div>
<form>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
<div>
<div>
<p>Test output</p>
</div>
</div>
<div>
<div>
<p>test value</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
If you disable the theme via the meta tag, it will exclude CSS that normally would be injected into your plugin. Depending on your plugin, you may want to add additional CSS to suit your needs.
Given your example, here's some baseline CSS that you can add:
html[buildfire] {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
background: none;
overflow: hidden !important;
}
html[buildfire] body {
height: 100% !important;
width: 100% !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 0 auto;
}
I am looking for a way to make a row with 8 col-md-6 divs display in a different way than usual.
How bootstrap normally does it:
How I want it:
The number columns is dynamic so it can exceed 20 for example and be a uneven number.
Code:
<div class="row">
{foreach from=$item.Opties|default:array() name=optie item=optie key=key}
<div class="col-md-6">
test {$optie#iteration} (normally there is more code in here)
</div>
{/foreach}
</div>
I have tried:
order-md-* but for this solution i need to add css since it might exceed 12 which i'd rather not.
Having just 2x .col-md-6 and the foreach in there but its a bad solution. since then I have big piece of html twice.
If you can't change the markup structure there's no simple way.
One option is to use flex-column but there is no way to set the number of divs per column so you'd have to use max-height...
#media(min-width:768px) {
.mh {
flex-direction: column;
max-height:140px;
}
}
Another option is to use CSS columns which order from top to bottom instead of left to right.
.row.columns {
column-count: 2;
column-gap: .1rem;
display:block;
}
.columns > .col-md-6 {
display: inline-block;
width: 100%;
max-width: 100%;
}
The last option is to use flexbox ordering for the specific positions...
<div class="row">
<div class="col-md-6 order-1">
<div class="border p-1">1</div>
</div>
<div class="col-md-6 order-3">
<div class="border p-1">2</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">3</div>
</div>
<div class="col-md-6 order-7">
<div class="border p-1">4</div>
</div>
<div class="col-md-6 order-2">
<div class="border p-1">5</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">6</div>
</div>
<div class="col-md-6 order-4">
<div class="border p-1">7</div>
</div>
<div class="col-md-6 order-8">
<div class="border p-1">8</div>
</div>
</div>
Demo: https://www.codeply.com/go/IczuqP9l7K
this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>
I am trying to fixed the menu in the template, but every time when I use the fixed function in the menu, an error occurs because the menu is misplaced to the right off the page.
The example is here: http://jsfiddle.net/ecram/ddbvg532/1/
Reviewing the code and I think the problem is on the Grid.
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="ui fixed inverted pointing menu">
<div class="header item"><i class="home icon"></i> Principal
</div>
<div class="right menu">
<a class="item"> About</a>
<a class="item"> People</a>
<a class="item"> Projects</a>
</div></div></div>
</div>
I resolve the problem using:
<style type="text/css">.fijo {position:fixed !important; top:0px; z-index:10 !important} </style>
<div class="fijo">
Content
</div>