I've tried finding the solution to my problem but came up with nothing, so forgive me if this has been covered elsewhere.
I'm using Masonry for a client's site that I'm currently developing. In any viewport size that is 768px or wider, there are two element widths: 20% and 40%; when sizing down to mobile, i.e. up to 767px, the element sized at 20% becomes 50% and the one at 40% becomes 100%.
The problem is that, in mobile view, Masonry doesn't always put two of the 50% elements into a row, so the grid becomes broken up.
Here's a link to the dev site and Masonry grid: http://176.32.230.48/maxence.io/#work
Here's my CSS for the two different grid-item sizes:
.grid-item,
.grid-sizer {
width: 20%;
#include media(xs-max) {
width: 50%;
}
}
.grid-item-lg {
width: 40%;
#include media(xs-max) {
width: 100%;
}
}
Here's the relevant block of jQuery:
$container.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
I'm also using the Masonry layout method on window resize:
var windowWidth = $(window).width();
if (windowWidth < 768) {
$('#grid').masonry('layout');
}
Anybody have any ideas?
Related
I want my grid to have a dynamic height. Before with angular 1 and kendo i would do like this.
<kendo-grid id="grid" options="entityGrid.gridOptions"></kendo-grid>
With the following CSS:
#grid {
height: calc(100% - 1em);
}
But with Kendo grid for angular2 when i try this it wont work.
<kendo-grid id="grid"
[data]="entityGrid?.view | async"
[scrollable]="'virtual'">
</kendo-grid>
When using scrolling (and static headers), the grid content area needs to have a height, too. Computing it dynamically based on the page is not supported at this time, and is not going to work with angular-universal. You can log this as a feature request on the kendo-angular2 repo, so that it is considered for implementation.
That said, you can use the following hack to make it work:
encapsulation: ViewEncapsulation.None,
styles: [
`kendo-grid {
height: calc(100% - 3em);
margin-top: 3em;
}
kendo-grid .k-grid-content {
height: calc(100% - 46px);
}`
],
This will pass the styles in the component itself. The value 46px is the size of the header, and 3em is your desired offset.
See this plunkr example for a working demo.
I was able to set dynamic height with following configuration
<kendo-grid class="grid"
[kendoGridGroupBinding]="data"
[ngStyle]="gridHeight"
</kendo-grid>
In TS file
public gridHeight = {
height: 'calc(100vh - 140px)'
};
You can set height as per your requirement from TS
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.
I'm using masonry layout in WordPress so my local site's masonry layout is put together with loops. I've created a fiddle to explain my question.
How do I control the positioning of one item within a masonry layout?
I want a div to always be at the top right of the masonry container (to the right of my top left corner stamp)
How do I override the positioning that masonry assigns its .box items?
#container { max-width:635px; width:100%; }
.corner-stamp { background:gray; width: 90px; height: 90px; }
.box {
width: 90px;
height: 90px;
margin: 5px;
background: #6AD;
float: left;
}
/* I want to freely position this item with css */
#biggerBlock{
width: 395px;
height: 200px;
background: #6AD;
left:25%; /* overidden by masonry */
}
.box.large {
background: #084;
z-index: 2;
}
UPDATE:
David Desandro answered the question on the official Masonry Git page. The new isotope v2 will have this feature with the ability to include 2 corner-stamps. Thanks for the downvote.
There is no cornerStampSelector property in pure masonry now. You can use stamp option:
Specifies which elements are stamped within the layout. These are
special layout elements which will not be laid out by Masonry. Rather,
Masonry will layout item elements below stamped elements.
$container.masonry({
columnWidth: 100,
animate: true,
stamp: '#biggerBlock'
});
And stamp method:
Stamp the elements in the layout. Masonry will lay out item elements
around stamped elements.
$container.masonry('stamp',$('#biggerBlock'));
My client is asking me to reduce size of current website for desktop browsers by 30%.
is there a css or meta tag to do it like viewport meta tag on a mobile browser?
Hmmm... I know this is an old question, but there is a MUCH better way to go about this: use the CSS scale() transform function on the <html> tag to scale EVERYTHING inside. Check out this jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/
The magic is all here:
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
You can look at the css screen media type.
It is:
Intended primarily for color computer screens.
You can use it this way:
#media screen {
body { font-size: 70% }
}
There is also a handheld media type, primarily:
Intended for handheld devices (typically small screen, limited bandwidth).
However, you will need to test the different devices and desktops your client is focusing on in order to determine how using these media types will effect the user experience.
Odes is right.
#media screen {
body { font-size: 70% }
}
But to make this really work well, you must use ems instead of px everywhere. That goes for margin and padding as well as width and height of all elements.
A good way to do this is to use SASS. Just create your own sass function to convert your px measurements into ems on the fly. Something like this will do:
#function em($px, $context: 16, $basesize: 16) {
#return (($px/$basesize)/($context/16))+em;
}
Which then gets used in your CSS like so:
div { font-size:em(12); width: em(200,12); }
So, if the body font size was set to 100%, then the font size would be equivalent to 12px and the width of the div would be 200px wide.
Here code for proportional scale and positioning, wnen using "transform: scale"
CSS
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
JS
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale );
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
You can enable the meta viewport tag on desktop with JS. First you should derive the setting (width) from the meta tag:
var viewportcontent = $( "#myviewport" ).attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
Then you need a little JS and the solution of Mike to get this working solution: http://codepen.io/anon/pen/GqoeYJ. Note that this example forces the width to be 1200 pixels, but initial-scale: 0.7 could be implemented in the same way.