EDIT: Problem solved!
So im wondering if its possible to fit both picture and text into same height, i at least wish to cut the text to fit the actual column to be same height as pictures are when i resizing to laptop, tablet and mobile versions.
Here’s how desktop looks:
Here’s how laptop version looks:
tablet version:
HTML:
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Gamers Heaven</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Games
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">FPS</a>
<a class="dropdown-item" href="#">Open World</a>
<a class="dropdown-item" href="#">RPG</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other gaming related
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Something</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="#"><img class="d-block w-100" src="https://pmcvariety.files.wordpress.com/2018/06/pubg.jpg?w=1000&h=563&crop=1" alt="First slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="https://hexus.net/media/uploaded/2018/5/a8d7638a-ae49-4794-b422-06b667bcc4f5.jpg" alt="Second slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="https://store.ubi.com/dw/image/v2/ABBS_PRD/on/demandware.static/-/Sites-masterCatalog/en_US/dwd8a7b19e/images/large/5afda5f788a7e34d25b5012f-1.jpg?sw=1084&sh=822&sm=fit" alt="Third slide"></a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Main Content -->
<div class="container-fluid">
<div class="row row-eq-height mt-5 mb-5 ml-3 mr-3">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="row row-eq-height">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, bu</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="row row-eq-height">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, bu</p>
</div>
</div>
</div>
</div>
<div class="row row-eq-height mt-3 mb-5 ml-3 mr-3">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="row row-eq-height">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, bu</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="row row-eq-height">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, bu</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<p>Made by: Ismar Begić</p>
<p>Contact email: begic.ismar96@gmail.com</p>
<p>@2018 All Rights Reserved</p>
</footer>
CSS:
.navbar-brand {
font-size: 30px;
}
.navbar-nav > li {
font-size: 18px;
}
.carousel-control-prev,
.carousel-control-next {
border: 2px solid white;
margin: auto 0;
height: 50px;
width: 40px;
background-color: white;
}
.carousel-control-prev-icon {
height: 27px;
width: 27px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%#000000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
height: 27px;
width: 27px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%#000000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
.carousel-indicators li {
width: 15px;
height: 15px;
border: 1.5px solid white;
border-radius: 50%;
margin: 0 8px;
}
.carousel .carousel-item > a > img {
width: 100%;
height: 40em;
}
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 2em;
background-color: rgb(197, 194, 194);
height: 12em;
}
.footer > p {
line-height: 1em;
font-family: 'Montserrat', sans-serif;
padding-top: 5px;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 320px) and (max-width: 768px) {
.carousel .carousel-item {
height: 22em;
}
.carousel .carousel-item > a > img {
height: 22em;
}
}
As you can see i already have tried some solutions like doing something in CSS and trying row-eq-height but nothing seems to be working. I know text might be bugging, but is there any way i can fit both pic and text’s columns to fit at same height? At least to possibly cut the text so it can fit, i will be putting them into link’s anyway. It messed up my margins between columns when resizing too.