Hey guys!
I’m trying to make a site with a Carousel with Col-MD-6, no-scroll and 100% browser Height, identical to this web site.
But i’m finding very trick to achieve the 100% browser height for Carousel with no-scroll. I’m using bootstrap 3.
Somebody can help-me?
Can you upload a link so I can view? as this is easily done but I want to see where you’re going wrong.
Yes!
www.----------
Thanks!
Well - I said it’s easy (putting pressure on myself!) lol
I will need to look into this more when I’m back at my computer in a few hours, but here is a preview using colour instead of image as placeholder.
Lol Jack!
I’ll be waiting for your solution with image.
Thanks!
adriano I haven’t forgotten you lol I’m just back home after spending the last few hours helping a friend with his laptop!, check back tomorrow and I’ll have a solution 
adriano_zeni, just to confirm, do you want this exactly as the link you provided? or without the fixed position of the carousel, allowing for scrolling of columns to the right?
Hi Jack!
Thank you, but i already made it with a help from other forum from bootstrap studio…
Here’s the final result: http://nv-test.bss.design
And the guide thru:
HTML Structure
<div class="page--header">
<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>
</div>
<div class="page--main">
<div class="std">
<div id="main-images" class="adjustHeight">
<div data-ride="carousel" class="carousel slide" id="carousel-1">
<div role="listbox" class="carousel-inner">
<div class="item adjustHeight car-slide-1 active"><img src="pixel.gif" alt="Slide Image" /></div>
<div class="item adjustHeight car-slide-2"><img src="pixel.gif" alt="Slide Image" /></div>
<div class="item adjustHeight car-slide-3"><img src="pixel.gif" alt="Slide Image" /></div>
</div>
...
</div>
</div>
<div class="row no-gutter" id="secondary-images">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<div class="col-md-12">
<footer>
...
</footer>
</div>
</div>
</div>
</div>
Notice, we added the class adjustHeight to the #main-images and to the .item‘s of the carousel. That is what the JS code will adjust the height so it fills the browser.
And the CSS:
.page--header .navbar {
margin-bottom:0;
}
.row.no-gutter {
margin-left:0;
margin-right:0;
}
.no-gutter [class*="col-"] {
padding-left:0;
padding-right:0;
}
.page--main {
padding-top:50px;
}
@media (min-width:992px) {
.page--main {
padding-left:50%;
}
}
@media (min-width:992px) {
.std {
overflow-y:auto;
}
}
@media (min-width:992px) {
#main-images {
position:fixed;
width:50%;
left:0;
}
}
.carousel-inner > .item {
height:800px;
}
.carousel-inner > .item.car-slide-1 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
.carousel-inner > .item.car-slide-2 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1.1_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
.carousel-inner > .item.car-slide-3 {
background:url(https://uk.nicolasvahe.com/media/wysiwyg/Nicolas_Vahe/1.2_UK_Week_5-Jane-NV-B2C-Site.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:50% 0%;
}
The only thing is that the carousels images that are directly in the carousel it’s self we used a 1px by 1px transparent pixel.gif images for each carousel item’s image so that we could use a background image instead.
JS code to adjust the Height
var headerOffset = $('.page--header').height();
$(window).on("resize",function(e){
headerOffset = $('.page--header').height();
});
function setMainImageHeight() {
var fixedImage = $('.adjustHeight');
if (fixedImage.length > 0) {
fixedImage.css('height', function() {
var headerHeight = headerOffset;
var elemNewHeight =$ (window).height() - headerHeight;
return elemNewHeight + 'px';
});
}
}
$(window).on("load resize",function(e){
setMainImageHeight();
});
It’s basically the JS code they are using for that part.
Thanks to Saj from bootstrapstudio Forum.
Glad you got it sorted 
I’ve taken on too many projects at the moment, plus with helping friends, haven’t had a chance to look at this until now.
For anyone whom is interested, this was the discussion on the BootStrap Studio Forums:
https://bootstrapstudio.io/forums/topic/carousel-with-md-6-and-100-height/
I am not sure how others feel about this [ it’s an ethical and legal discussion unto itself ]. But when seemingly pilfering parts of others websites and source codes from sites, it’s probably best not to directly link to their server and resources in your examples. If they pay attention to their analytics they could easily see the traffic.
More importantly, in many cases if a person likes an effect or something they find or see on a site, you can try contacting the developer for insight regarding it. In most cases they will provide some insight into their techniques and many times grant approval for usage of snippets, etc.
You should never steal someone’s source code - that is going too far IMO.
I know from my previous work in graphic design I’ve had people copy my layouts and at first I’ve thought “you cheeky…” but in reality everyone copys layouts/ideas from each other - I had this very discussion recently with a pro freelance web designer - ideas/layouts are all shared and used as inspiration.
You can’t copyright a hero banner or a bootstrap carousel, nor can you legally own the rights to having a slider designed to a specific layout, such as 100% browser height.
if I “copy” someone’s layout for learning purposes, I visually rebuild the layout using my own knowledge & also adding to that knowledge (without viewing the source code) and I never use it on a project because IMO it’s important you have your own designs for projects.
Hey Guys, are you just assuming what? Do you always judge someone like this?
Nobody steal nothing. This is a simple and pretty standard CSS with JS. This is internet and this is ONLY for learning porpoises, I just want to know how to do this.
Oh, and it is all framework!
Is that a problem?
Man…
lol adriano_zeni calm down my friend! It’s just a discussion! but an interesting one as some people will take issue.
I would be surprised, actually shocked if there was any designer in the world (graphic or web) who hasn’t copied another for learning purposes.
Just be careful when it comes to actual projects because IMO its perfectly fine to be inspired by another website’s concept, and learn from it but you should never blatantly copy the exact layout for your own website or clients.
lol Jack…
You’re right. Thanks for your concern.
Hi there @wooflkza, and Welcome aboard! Very nice to see you here 
I did use your app , and play around, but not really get too familiar with it a good while back. Its great that your still getting on with it, I’d sort of forgot about it , after upgrading my OS etc and reinstalling stuff, so thank you for you the reminder of your great free App!
Thank you really for making it available, I will re download it now and start to play with it again as I need to re crash course myself in all my work flow after a bit of a lay off.
I shall now see what newness you have come up with since I last played.
So Welcome and enjoy your visits
@schpengle Wow Ian - who is this generous gentleman offering us tools for free - in mid of our community trying to get our heads around a paid application?
Cheers
Thomas
I know Its been around for a good while, if you haven’t seen it before. it does an amazing amount of stuff.
I downloaded it quite some time ago, when I was experimenting and deciding what to do and which app to go for.
For free, I thought it blew everything else clean out of the water!
And its not a damned online app!
I mean, for free, WHAT is there not to like?
I just realised I had an account there and am downloading the latest version again now. I will also check out their forums too.
And yep, I was surprised when I first discovered it too. Most free things you can find do about 1% of what they can do , and you pay for everything else as addons or plugins just to end up with the basic, fully functioning app (long list of examples go here)
But , yep, I really find the Pinegrow scene encouraging and supportive (mostly 
) and it makes me WANT to learn more.
Pinegrow is the backbone of the toolset, which you can mix and match and add too.
But, now that the Mobirise Dev has popped in to remind us about his offering I will definitely check it out again.
Since it has been free for so long, I can only assume it is a labour of love…
With some philanthropic principles involved.
if so, a great ethos. Respect, but I also hope he somehow earns enough to keep himself in a comfy life
That’s not the thing.
But is it just me questioning the method on how to transport those great news into the world? I might miss here something and, if so, apologise in advance - but to me it’s a bit shady if to speak so.
Cheers
Thomas
HI , Im not sure if I misread it earlier, but I thought the message said my free app but it doesn’t now, so hey, maybe I have just woken up
either way, its been around for ages, so maybe I misread (did we both? or maybe message is edited) so, no shadiness I think. As in, what is shady about giving away a free app and wanting people to know about it and use it, so share the info in forums of the same Genre?
er…unless its a windows bloatware, key logging, data hacking, trojan carrying, etc etc etc.
But I’m on a Mac, so I’ll give it a go again
Lets just mix it all up and try and put some fun back into this old dog of a hobby/wannabe profession then eh?
WOOPS!
Wow Slider is NOT free - that is $39
unless you take advantage of their Black Friday Deal
Which I will post in our deals channel.
yeah I think I now remember why I didnt go down this road… having to pay extra for a code editor
With Pinegrow I get one! and now, it plugs into OTHER code editors too! (AH, did I hear someone say *sublime text, with a teeny weeny, lightweight footprint and fast as hell?..oh, you mean it DOESNT connect to that one?
REALLY?
oh my!
what a shame… hint hint)
