Trying to figure out how to make either a static image or a carousel full-screen to always completely fill the browser window.
Any tips? I’ve tried using 100% and !important but it’s not working.
thanks!
@andrew Are you using Bootstrap and if so which version?
Hi Rob - yes, Bootstrap 4.
If you’re placing the carousel or image in a Bootstrap container, you have to remove the .container class and replace it with .container-fluid. If you want it to extend to the very edges of the screen, you’ll need to set the left and right padding to 0 as well.
2 Likes
Hi Printninja -
Thanks… tried this but doesn’t seem to be working. I’m sure I’m missing something basic…
@andrew this should work for you if I understand what your trying to achieve.
Here’s what it ends up looking like fullscreen carousel using Pinegrow
Here’s what you can do:
Created a new blank Bootstrap 4 file in Pinegrow
then dragged the carousel element to the tree
but made sure not to place it inside any other element, e.g. container
With the carousel selected in the tree click on the Elements Properties panel so you can add some style rules using Add class button, then added 2 classes .carousel-fullscreen and .carousel-fade
Before adding classes:
After adding classes:
The next step is to add the properties to style.css for .carousel-fullscreen
If you right-click on carousel-fullscreen you will get a menu that will allow you to Create CSS Rule
and from there you can select style.css from the dropdown menu bottom the end of the modal and save.
Then change to the Style CSS Panel
and clicked on the edit stylesheet source icon </>
which opens the style.css file in code view
Paste this into it and save the style.css file, (if you haven’t already you should save your html document too).
/* carousel fullscreen */
.carousel-fullscreen .carousel-inner .carousel-item {
height: 100vh;
min-height: 600px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* carousel fullscreen - vertically centered caption - this is optional, just displays caption in centre of carousel instead of the bottom */
.carousel-fullscreen .carousel-caption {
top: 50%;
bottom: auto;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Next in the document tree open the view of the carousel if it isn’t already open (partial screenshot).
Next was to add a style to each carousel-item to allow for adding a background image to each, e.g. slide1, slide2, slide3, etc.
This was as simple as selecting each .carousel-item in the tree
and changing to the Active tab
then enter the name of the style, e.g. slide1 click Create then select the next .carousel-item and enter the name of the style, e.g. slide2, and so on for each slide in the carousel.
Next selected each image in the carousel and deleted them
Then go back to the style.css file and added the background images for each slide and a fallback background color
/* Set up Slide background images */
.slide1 {
background: url('http://pinegrow.com/placeholders/img13.jpg') #21acad;
}
.slide2 {
background: url('http://pinegrow.com/placeholders/img15.jpg') #8140a0;
}
.slide3 {
background: url('http://pinegrow.com/placeholders/img16.jpg') #c73816;
}
This part isn’t necessary and will depend on the contrast between the image and the text but adding another div to each .carousel-item to create an overlay just drag an empty div element to beneath the .carousel-item but before the carousel caption.
Add the .overlay style to the style.css file like earlier then open the style.css view and add this to .overlay
/* overlay for better readibility of the caption */
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
transition: all 0.2s ease-out;
}
And hopefully that’s it working for you!
2 Likes
Andrew,
The carousel in your link is showing up full screen in my browsers. Checked in Chrome, Firefox and IE 11.
Thanks - did you resize your windows? When I do, the image stays full-width, meaning, the bottom of the image starts “climing” leaving white space at the bottom.
@andrew have you tried what I posted?
Not yet - will be getting to it shortly. That’s why I’m curious as to how it looked for Printninja.
Okay. This is how your page is displaying for me in Safari (space at the bottom):
I’ll be available for the next hour if you need any help?
This is normal behavior. The image will shrink responsively and proportionately, so if the image starts out filling the entire browser window in both height and width, the only way it will continue to fill the window is if you reduce BOTH the height and width of the browser. If you only reduce the width, then there is going to be a growing white space underneath, that will be filled by whatever site content comes after the carousel.
If you want to be able to reduce the width of the browser and still have the image fill the entire height, then either the image will have to shrink disproportionately (making it look distorted/stretched from top to bottom) or it will have to stay the same size and be cropped horizontally.
I suppose you could find a way to change the code of the carousel to do this, but it’s not the default behavior, and I don’t think it would look very good on a website.
If you’re talking about an image rather than a carousel, you can accomplish what you want by using the background-size rule…
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
Appreciate it!
I’ve deleted the files on the server, going to rebuild (although curiously they’re still showing up… have to check my FTP app.)
Hi Rob -
just getting back to this - thanks so much for your help!
I’m getting stuck at the part where I delete the images then add the images to the CSS:
After that step, I’m just getting a white screen, and they don’t appear in the tree.
Any thoughts?
cheers
Andrew
Hi @andrew any chance of a link? For the moment I’m going to follow my own steps above and see if I come across the same issue.
Sure thing -here you go.
You seem to have remove everything inside the carousel-inner div, you should only remove the image that is inside the carousel-slide, in my example it left the carousel-caption:
This is all you have:
This is your link opened in Pinegrow with the missing code added back in for one slide:
This is how it looks:
Ah, that must have happened when I deleted the Images in this step.
Next selected each image in the carousel and deleted them
I’ll go back & try again. Thank you Rob!
No problem let me know how you get on, I’ll be checking in every 15 minutes or so. Hopefully you get it to work. What timezone are you in?