Is that possible to do with CSS.
I tried this:
#gallery_ul {
display: inline-block;
list-style: none outside none;
margin: auto auto auto auto;
width: 986px;
}
#gallery_ul li {
float:left;
margin:10px;
padding:10px;
text-align:center;
border:1px solid grey;
width:274px;
}
#gallery_ul img {
padding-bottom:5px;
}
If yes then how? Thank you.
You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.
See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/
You can. But i think you have to be more specific.
One approximation is to create each block and set "float: left" property, then the squares will organize automatically or you can create three vertical columns and then put the squares inside.
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I'm new to LESS and I would like to know what's the best solution to have a dynamic mixin. What I want to do is change the border color depending on the parent wrapper.
For exemple .letterList & .letterActive are inside a .azStores wrapper class. Here my mixin is set to #azStoresMainColor.
In my html the wrapper class is changing dynamically (categoryStores, floorStores...) and I want to change the color of the border depending on those wrapperClass.
Is there a nice solution to do that in LESS ? Thanks a lot in advance.
.grouplistBorderMixin() {
border-top: 2px solid #azStoresMainColor;
}
.letterList div:nth-child(1) {
.grouplistBorderMixin;
box-sizing: border-box;
}
.letterActive {
text-align: center;
height: 94px;
line-height: 94px;
.grouplistBorderMixin;
box-sizing: border-box;
}
I just want to change the size of Dojo Filtering Select design element via CSS.
I tried manual or CSS File. It did not work.
<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect>
Any suggestion is important
Cumhur Ata
You just need to override the dijitTextBox CSS class.
You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).
Here's a simple example:
.dijitTextBox {
width: 40px;
height: 8px;
}
As you are using Bootstrap theme you need to adjust the arrow button too.
This works for me:
.dbootstrap .dijitTextBox {
height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
margin-top: -3px;
margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
padding: 0px 10px;
}
When using Sass I would do something global like this (which I got from CSS-tricks btw)
// Variables for MQ's
$mq-mobile-portrait : 320px !default;
$mq-mobile-landscape : 480px !default;
$mq-tablet-portrait : 768px !default;
$mq-tablet-landscape : 1024px !default;
$mq-desktop : 1382px !default;
Then I would create mixins for the media queries like this (I'll only include a few to give you an idea
// Mixins
// Both portrait and landscape
#mixin mobile-only {
#media (max-width : $mq-mobile-landscape) {
#content;
}
}
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
#mixin mobile-portrait-only {
#media (max-width : $mq-mobile-portrait) {
#content;
}
}
So Sass has this #content which is great because it means that I don't have to declare the content within the mixin but can do an #include mixinName and it creates the parent wrapper for any CSS properties I need to put into it across different files. I discovered that this worked well for my work flow.
So here's an example of that in a partial .scss file:
section.footer {
height: 90px;
padding: 0 10px;
#include mobile-portrait-only {
padding-top: 10px;
background: $gum;
div.ftrLogo {
display: inline-block;
margin: 0;
height: 70px;
width: 45%;
div.smlLogo {
display: block;
background: url('../images/svg/small-logo2.svg');
width: 106px;
height: 49px;
margin: 0 auto;
padding: 0;
}
p.footer {
font-size: .375em;
color: $white;
text-align: center;
}
}
}
So as you can probably gather the #content allows you to just call an empty media query wrapper anywhere in your files (obviously you have to import all of your partials into one main file) but this is great.
Today I'm using LESS on a project and I like it a lot the problem is I can't seem to find an equivalent solution in LESS-land.
I was reading up on passing rulesets http://lesscss.org/features/#detached-rulesets-feature which looks like it's close to what I want but my brain is not understanding it today; I'm optimistic about tomorrow.
If anyone has tried anything like this or can immediately see the error in my ways; please provide your two cents. I really want to figure it out and thought to ask this gifted community of SO'ers.
Thank you in advance you're a baller!
// Variables for MQ's
#mq-mobile-portrait: 320px;
// Mixins
.mobile-portrait-only(#rules) {
#media (min-width: #mq-mobile-portrait) {
#rules();
}
}
Now you can use the following code:
div {
color: white;
.mobile-portrait-only({
color: white;
width: 100%;
max-width: 500px;
});
}
The above will compile into CSS code as follows:
div {
color: white;
}
#media (min-width: 320px) {
div {
color: white;
width: 100%;
max-width: 500px;
}
}
So detached rules are rules between {} assigned to a variable:
#detached: {};
Detached rules can be used as an argument for a mixin:
.mixin(#detached){}
You as call the above mixin with a detached rule as a parameter:
.mixin({color: red;});
or
#detached: {color: red;} // watch out for the last declaration wins rule for variables
.mixin(#detached);
Inside the mixin you should call the detached rules set to copy its properties and selectors (in fact you don't copy but insert them read for processing):
.mixin(#detached-rules) {
#detached-rules(); // parenthesis are required here
}
Finally for your example your code should look like that shown below:
#gum: url();
#white: white;
// Variables for MQ's
#mq-mobile-portrait: 320px;
// Mixins
.mobile-portrait-only(#rules) {
#media (min-width: #mq-mobile-portrait) {
#rules();
}
}
section.footer {
height: 90px;
padding: 0 10px;
.mobile-portrait-only( {
padding-top: 10px;
background: #gum;
div.ftrLogo {
display: inline-block;
margin: 0;
height: 70px;
width: 45%;
div.smlLogo {
display: block;
background: url('../images/svg/small-logo2.svg');
width: 106px;
height: 49px;
margin: 0 auto;
padding: 0;
}
p.footer {
font-size: .375em;
color: #white;
text-align: center;
}
}
});
}
I hadn't thought of doing it like Bass Jobsen suggested (although I've now seen that his approach is basically how the less docs do it), but I invented a mixin which I think is a bit more flexible. Though they are similar in result, I think the following solution allows for more customization and is easier to implement on the fly.
First I define the different sizes I want to use - to keep it simple, I'll just do two using a 'mobile first approach' (meaning if I don't include a media query, the rules will apply to all sizes and I should only include queries for sizes larger than mobile).
#tablet:~"(min-width:768px)";
#desktop:~"(min-width:1100px)";
Then the mixin:
.respond(#_size;#_rules){
#media #_size {
#_rules();
}
}
And Used Like the following:
.selector {
background:green;
.respond(#tablet,{
color:red;
background:blue;
});
}
And That Outputs:
.selector {
background:green;
}
#media (min-width:768px){
.selector{
color:red;
background:blue
}
}
With only two sizes to remember, it is easy enough just to do it the way Bass Jobsen suggested, but in practice, depending on how fine-grained I want my control to be, I may define up to 8 different media sizes (though I rarely use them all), and my approach above makes the process like calling one function rather than defining 8 different functions ( as I would do were I using the alternate approach ).
Hope this helps someone. It saves me a ton of time.
I'm creating an email template in MailChimp, and I have some responsive code that I want to work for the devices that support it (primarily iOS Mail and BlackBerry Mail apps).
While the template loads the responsive media queries correctly in the iOS Mail app, they don't appear to trigger within the BlackBerry Mail app. I am testing on both a BlackBerry Z10 and Q10 with the same up-to-date OS.
My media query looks like this:
#media only screen and (max-device-width: 600px) {
#templateContainer {
width: 100% !important;
}
.globalLogo {
width: 90% !important;
}
.logoBox {
display: block !important;
width: 100% !important;
}
.imageBox {
width: 100% !important;
display: block !important;
height: 40px !important;
border-left: none !important;
}
.emailTitle {
text-align: center !important;
}
#title {
border-top: 3px solid #FFF !important;
width: 100% !important;
display: table !important;
}
.topImageRow {
display: none !important;
}
.tableofcontents {
margin:0 0 30px 0 !important;
list-style: outside !important;
width: 90% !important;
}
}
I've also added the following viewport meta tag to the header:
<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">
I've experimented with max-width instead of max-device-width, but it doesn't seem to make a difference. I've also tried 800px instead of 600px, and removing the "only screen and" from the media query.
Any help would be greatly appreciated.
Final Answer:
Send it to a different email account domain. It can sometimes be the security filters at your workplace, so if you're sending it to you#yourwork.com, try hooking up you#yourotheremail.com to your blackberry and checking it there.
Original:
Not really a definitive answer, but hopefully this will get you closer...
Create a really easy media query to trigger (something like max-width:99999px;) and change the color or something really noticeable. Does it work at all?
If it is triggering, step your way down until it stops. If you can't get it to trigger at 99999px, it doesn't support media queries, even though the support charts suggest it does.
Sometimes your server can strip the media queries, so try testing it on different domain also, particularly if you have any sort of corporate server or software.
Another thing you could do is try and view the output code to see if your CSS is still intact. Not sure how to view this on a Blackberry though.