Landing Page Built with Bootstrap 4 - html

I have had a landing page built for me which is fairly simple layout. But the problem is the Banner Photo is swamping the page and I have to scroll to see completed page. Is there an adjustment I can make to HTML and/or CSS to reduce the height of the banner photo by about a third?

There are a lot of different approaches of doing this. I'll just show you one, that should perfectly fit your current page and needs.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex align-items-end overflow-hidden banner-image-container">
<img class="img-responsive" src="img/top-banner.jpg" width="100%">
</div>
(Inside your <style tag:)
.overflow-hidden {
overflow: hidden;
}
.banner-image-container {
max-height: 400px;
}
What I did is to limit the container around your image to a maximum height of 400px. Because your image is bigger then that, I added overflow: hidden; to the container, so it will cut the rest of the image off. Now your main focus in the image will be the building I guess. So I did move it all the way to the top with d-flex align-items-end.

Related

Angular youtube-player video sizing overflows div

I'm using youtube-player api for a project in Angular, the problem is that the videos are widther than the parent div, I have to set the width and height in the options to make it display corectly in the div but when I see the page from a bigger or smaller screen, the video is getting smaller or bigger than the div, for example if I see the page from my cellphone, the videos are bigger than the div, I'm using Bootsrap 5 for the horizontal cards, so I set the videos to display in a col-4 while the card body is display in a col-8.
This is how it looks from my monitor
This is hot it look in an Ipad Air
And this is hot it looks in a cellphone
As you can see the videos are showing correctly in my monitor but with different widths the videos are smaller or bigger, here is my code:
HTML
<div class="col-lg-11" *ngFor="let video of videos | slice:1:5">
<div class="card h-100" >
<div class="row h-100">
<div class="col-4 col-lg-4 pe-0">
<youtube-player class="rounded-start d-flex"
videoId= {{video.videoId}}
suggestedQuality="default"
[height]="105"
[width]="160" >
</youtube-player>
</div>
<div class="col-8 col-lg-8">
<div class="card-body pe-0 pe-lg-auto">
<h4 class="card-title">{{video.titulo}}</h4>
<p class="card-text"><small class="text-muted">{{video.descripcion}}</small></p>
</div>
</div>
</div>
</div>
</div>
What can I do to make the videos display correctly?
Here is a live example in stackblitz
https://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html
Ok, so after some more research I found a solution, not the best but at least the youtube videos are not overflowing the div, so heres what I did:
first as I'm using YouTube-Player library I have to use the youtube-player tag in my html and this generates an iframe ones the page is load to show the videos so heres what I put in the global CSS
div > youtube-player > iframe {
display: block;
width: 100%;
}
with this the youtube-player is taking the width the div have, so now I dont have to specify a width in the youtube-player options, only the height I want.
<youtube-player
class="rounded-start d-flex"
videoId="{{ video.videoId }}"
suggestedQuality="default"
[height]="90"
[width]="">
</youtube-player>
So for my horizontal cards I found that with height: 90 its enough to show the video without black bars at the top and bottom, and if the page is resize or seen from another device its going to show the black bars depending on the screen width but its not that bad because the video is still visible.
I update my stackblitz code with this if anyone wants to check it out and play with the height and resize the window.
https://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html
*Also I dont know why theres white space below some videos but in my project theres no white spaces
Edit:
The white space is because the title is too long and is taking more space so the card is longer, just "break" the text to only show 1 line of text with:
.card-title{
overflow: hidden;
}
.break-videoTitle {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

How to fit an image inside a Bootstrap 3 div?

I am using a div tag in code as shown below:
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive">
</div>
The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div, meaning specifically that I need to cover the full div using that image as it's resized.
I am using Bootstrap 3.3.7. Please advise.
Just add you images width to 100%.
But as you are saying user will upload various kind of images, so can use object-fit property.
Add the CSS like this:
.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>
You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/
For Bootstrap 4
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-fluid">
</div>
bootstrap.css
.img-fluid {
max-width: 100%;
height: auto
}
It is safe to assume that by fitting you mean covering all of the width. This is because
You typically do not know the height just by using col-sm-6 or col-md-6 or col-lg-4.
There is a huge probability of loss in aspect ratio of the image if you try to resize it according to your own will.
Use <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> for fitting the column. This will fit your image width-wise into the column and will automatically modify the height (keeping the aspect ratio in mind), so you do not have to worry about image getting illogically resized.

Bootstrap Column in column

This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo

How to make my scrollable horizontal gallery centered on the first of three images and be responsive using bootstrap?

I'm creating a portfolio and have a horizontally scrolling gallery with 3 macbook screenshots of some personal projects of mine. My bootstrap knowledge is limited, so I could use some help.
First, I want it to center the scrolling on the first image in the gallery. How do I accomplish this? Having trouble because the edge of the second image is always in view.
Second, I want to make the gallery responsive and still center on the first project picture. Not sure how to accomplish this.
FYI, I do plan on creating a modal for each image that contains relevant case study material for each project.
Thanks in advance!
HTML
<!-- Work Section -->
<section id="work" class="container content-section text-center">
<div class="container">
<div class="row">
<div class="gallery horizontal-gallery">
<img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
<img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
<img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
</div>
</div>
</div>
CSS
.gallery {
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.gallery .horizontal-gallery {
display: inline;
}
http://www.bootply.com/QJ16EUgEVf
You can try this http://www.bootply.com/TVthEnxmzd
Wrap each image with div and make it 100% width and display:inline-block;

Bootstrap - Grid system - Fixed height issues

I building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs.
To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.
I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights.
https://jsfiddle.net/DTcHh/9847/
<div class="container-fluid row-fluid" style="height: 100%;">
<div class="row grey" style="height: 10%;"> title of the website here </div>
<div class="row yellow" style="height: 150px; text-align: center;">
<img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
</div>
<div class="row grey" style="height: 60%;"> main content area </div>
<div class="row grey" style="height: 10%;"> footer area </div>
</div>
The way you are using bootstrap is not correct. Your are not manipulating bootstrap grid system properly. Your have put your image in a row but not in a column. You know you should have minimum one column(e.g. col-md-12) in a row. Then Bootstrap will consider your image or content perfectly. Refactor your code and follow the way bootstrap told you to do. Besides, you can make your image responsive using bootstrap's img-responsive class. See here: http://getbootstrap.com/css/#images-responsive
I think what you are looking for is this. This basically applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
You can read more at http://getbootstrap.com/css/#images-responsive
Sample here: https://jsfiddle.net/qxLtmhat/
First you know you should have minimum one column(e.g. col-md-12 in a row) - see the first answer from Imran and second you hard coded the width and height - remove them and add the img-responsive class on the img.