I'm trying to build a layout with a 100% height section - the twist is that this is a Masonry layout, and the first Masonry item is the 100% height/width of the page on load (& responsive).
Following the 100% height item, I want to have 'regular' masonry (columns, rows, etc. etc.)
The problem I'm having is that the first item .grid-item grid-item--feature is overlapping with the other items. I've had this before with ImagesLoaded, but never with an 'empty' grid.
I'm picking this back up after a month and probably overlooking something really simple but I've put together a little JS Fiddle here. How can I fix this issue?
Try this code :
.grid-item-feature { position: relative; height: 100vh;}
See this fiddle
Explanation of the use of vh :
With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects
1/100th the width of the viewport. To make an element the full height
of the viewport, for example, you'd set it to height:100vh.
Related
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
What I have is a div with some items (menu item), this div will be the height of the browser viewer and I would like the spacing between the <p> to fill the height of the div.
So for a 1024px screen sixe, 20 px spacing is fine between paragraph, but sometimes it better to be 17px and for some big screen, 22 px should be fine.
Do you have a javascript function to auto calculate this or a jQuery plugin ?
there is a newish css module called flexbox. check this out.
basically set the container height to 100%, and set the elements each to flex:1 1 auto.
play around with that URL too
more info:
here is a jsfiddle. it's rudimentary but demonstrates the basic idea. just set the height of .flex-container to 100% when you put it in on your page. (i have the fiddle set to 400px because 100% doesn't grab the result-frame height in a jsfiddle.)
the CSS looks daunting because a lot has to be vendor-prefixed but it's actually quite simple.
If I understand you correctly, you are looking to modify the margin of p tags based on height of parent div - maybe something like this would help
MAX = 200;
if ($('div').height() > MAX) {
$('p').attr('style', 'margin:10px 0 10px 0;')
} else {
$('p').attr('style', 'margin:0 0 0 0;')
}
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.
Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/
Also, it would be great if you can explain the CSS theory behind it.
Note: Such misalignment is observed even when the browser is minimized.
Note: My desktop was configured in 1024 by 768 when this is tested.
Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/
To allow for rounding errors, take of a percent. 15% for left and 84% should work.
However, the problem is that you are adding in margins too, that obviously won't work well.
Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.
In other words, margins aren't part of the div's width.
When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...
your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same
if you are giving margin means reduce your width related to margin size
mainContainer css
#mainContainer {
width:75%; //(or) reduce your margin
}
or
#leftNavContainer {
width:15%; //(or) reduce your margin
margin:5px;
}
I have page http://inspire.mobi/how, where it is aligned horizontally well ut it is not properly aligned vertically.
For this page http://inspire.mobi/how, there are 2 divs ( having css classes mainHow & botHow) in the body part. Both these divs are in one main div "mainHow" whose height is calculated using javascript (wondow.height- footerheight-headerheight). Internal 2 divs (having css classes mainHow & botHow) are 75% & 25% of the main div "mainHow". But it is not covering full height. When i zommin & zoom out the page (not 100% page size), it is creating too much part leftout below "bothow" div.
Please help me on this.
I had a look at this site and i can see a few errors that might be causing it.
Your divs mainHow & botHow, height are adding up to 105%.
In your javascript that you have set up to work out .container height, your footer height that you have hardcoded is set to 110px, im seeing the footer hieght as 91px, so you will have a gap there. If you fixed this, it should be the full size. If im understanding the question right