I have a problem making my carousel animation work.
I want it to slide-out/slide-in as it does on the Bootstrap website, but in my case it doesn't slide-out, the old item just disappears and slide-in animation occurs.
I have attached a gif to explain what I mean.
Has anyone else experienced similar issues? Or is my code wrong?
<div class="container-fluid b2 pt-5 pb-5">
<div class="row text-center">
<h1>
Why Choose Us
</h1>
</div>
<div class="row justify-content-center">
<div class="col-4 centeralign">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur consequuntur maiores sapiente placeat quis dolorem repellendus.</p>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide d-lg-none" data-ride="carousel" data-slide="true">
<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 pb-5 pt-5">
<div class="carousel-item active">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconcheck.png" height="75px" width="75px" alt="">
<h3>Intuitive interface</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconfile.png" height="75px" width="75px" alt="">
<h3>Performance tracking</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconpuzzle.png" height="75px" width="75px" alt="">
<h3>High quality content</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
</div>
</div>
You Have Use The Bootstrap Starter Template And After I Think Solve This Problem
And Put Your Code After The Body Tag Than Solve This Problem
Related
I made a page on localhost using HTML CSS and Bootstrap and used flickity slider in it and is working fine on localhost, but as soon as i uploaded the same code on wordpress, the slider arrows(previous and next buttons) crosses each other. I think there is some error in the order of putting files.When uploaded to wordpress slider looks like this On localhost slider looks like this Here is the code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/fontawesome-free-6.0.0-web/fontawesome-free-6.0.0-web/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<style>
#media(max-width : 576px) {
.pic {
margin-bottom: 30px;
}
}
#zoom-overflow {
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
}
.transition {
box-shadow: 1px 1px 20px -14px rgba(0, 0, 0, 0.63);
transition-duration: 2s;
transition-property: box-shadow;
}
img:hover {
transform: scale(1.2);
overflow: hidden;
}
img {
transition: 1s;
overflow: hidden;
}
.row {
overflow: hidden;
}
.transition:hover {
box-shadow: 7px 10px 20px -14px rgba(0, 0, 0, 0.63);
cursor: pointer;
transition: all 1s;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.blog-title {
color: #EF0001;
margin-bottom: 0px;
}
.blog-heading {
font-size: larger;
font-weight: 500;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<p class="fs-1 mt-5">A home for inspiring stories <br>
on business and technology.</p>
</div>
<div class="row">
<p> <a href="#" class="fs-5" style="color: #EF0001; text-decoration:none"> SUBSCRIBE FOR UPDATES →
</a></p>
</div>
</div>
<div class="container my-5">
<div class="row my-5">
<div class="col-md-4 position-relative mb-sm-5 pic mb-md-0">
<span id="zoom-overflow"> <img src="images/card2.jpg"
style="object-fit: cover; width:100%; height: 100%;overflow: hidden;" alt="" class="pic"></span>
<p class=" position-absolute bottom-0 fs-4 text-light" style="left:5% ;">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Vero, voluptates.</p>
</div>
<div class="col-md-8">
<div class="container p-0 d-flex-column">
<div class="row">
<div class="col-md-5 text-center"> <span id="zoom-overflow"> <img src="microsoft/m1.jpg"
style="width:100% ;" class="img-fluid" alt=""></span>
</div>
<div class="col-md-7 mt-3 d-md-flex-column flex-grow-1">
<div class="blog-title">BUSINESS</div>
<div class="container-fluid blog-heading p-0"> Collaboration announcement: Toyota Tsusho and
Yalantis
</div>
<div class="container-fluid p-0">
<small> Written by : XYZ</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 text-center mt-3"><span id="zoom-overflow"> <img src="microsoft/m1.jpg"
style="width:100% ;" class="img-fluid" alt=""></span>
</div>
<div class="col-md-7 mt-3 d-md-flex-column flex-grow-1">
<div class="blog-title">BUSINESS</div>
<div class="container-fluid blog-heading p-0"> Collaboration announcement: Toyota Tsusho and
Yalantis
</div>
<div class="container-fluid p-0">
<small> Written by : XYZ</small>
</div>
</div>
</div>
</div>
</div>
<div class="container fs-2 fw-bold mt-5">
IMPORTANT
</div>
</div>
<div class="container-fluid ">
<div class="row carousel mb-5" data-flickity='{"wrapAround" : true,"autoplay" : true,"pageDots":false, "prevNextButtons": true}'>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
</div>
</div>
<div class="container fs-2 fw-bold mt-5">
LATEST
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container mb-5">
<div class="row justify-content-center fs-5" style="color: #EF0001; text-decoration:none">SEE ALL ARTICLES
→</div>
</div>
<div class="container my-5">
<hr>
</div>
<div class="container">
<div class="row fs-2 fw-bold justify-content-center text-center">
Learn about business and technology from our <br> monthly newsletter!
</div>
</div>
<div class="container text-center mt-5"> <button type="button" class="btn"
style="background-color:#EF0001 ;">SUBSCRIBE</button></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
</body>
</html>
I started with bootstrap and try to create a row with 2 columns. The column right is split up into 2 rows. I try to use "space-around" to get a nicer layout for the column right (vertically), however, it does not work. The two rows are centered instead. Anyone knows why not? btw: the image itself is larger than the 2 rows in the right column.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid px-0">
<div class="row">
<div class=" col-6">
<img class="img-fluid" src="pictures/Eriko.jpg" alt="">
</div>
<div class="col-6 bg-info">
<div class="row h-100 align-content-around">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-8 text-center bg-danger">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
<div class="row justify-content-center">
<div class="col-8 text-center bg-primary">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
</div>
</div>
</div>
</div>
</section>
screenshot of current result
I'm trying to make a bootstrap design as shown in the codepen.
Everything works fine when I look at the codepen:
Codepen_bootstrap
... but when looking a the page locally in my browser (chrome and safari) the design gets crushed and things do not stack as it should.
The problem is, that the <div class="container thirdSection">is not expanding as I was wanted it. So the rows inside this container-div do exceed the borders of the container.
Same thing happens inside the <div class="container fourthSection">
Local setup is Wordpress running on "Local by flywheel".
Problem is shown in the following screenshot.
Bootstrap_screenshot_1
Bootstrap_screenshot_2
Could Wordpress be the problem?
index.php
<?php get_header(); ?>
<div class="container secondSection">
<div class="row firstRow">
<div class="col-sm-4 firstCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/fitsperfect.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">100% correct</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quo blanditiis ut necessitatibus ad quisquam? Voluptas, molestiae nobis, cum obcaecati magni soluta numquam rerum quas nemo facere doloribus voluptates sint.</p>
</div>
<div class="col-sm-4 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/like.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam praesentium itaque unde voluptatibus similique numquam repellendus earum aspernatur porro maiores veritatis, animi necessitatibus? Rerum sit sunt repudiandae ipsam mollitia est!</p>
</div>
<div class="col-sm-4 thirdCol p">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/secure.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">lorem heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, repellendus dignissimos. Minima sunt voluptatem et reprehenderit molestias dignissimos, facilis voluptate, sit rerum beatae, hic error deleniti accusantium unde possimus est!</p>
</div>
</div>
</div>
<div class="container thirdSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Five Steps from here to there</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum enim consequuntur a dolorum amet voluptatum, ducimus eveniet laboriosam voluptatem qui, asperiores nisi minus libero similique molestias animi eos quod totam odio dolores. Assumenda dicta eveniet modi ex velit dolorum cumque ut aperiam architecto? Culpa iusto officiis minima fugiat suscipit adipisci ab sed perspiciatis rerum eveniet doloremque, dicta quibusdam architecto labore ad laudantium? Quas voluptas rerum modi mollitia fuga tenetur nesciunt illo earum? Vitae hic sequi beatae, quasi, eligendi, magni ipsam libero velit non nobis illo mollitia molestiae. Sequi vitae doloribus iusto rerum tempora? In laborum perferendis dolores molestias suscipit! Voluptate necessitatibus, beatae a iure nesciunt odit officiis reiciendis, molestias sint sapiente optio error et quam maiores repudiandae minus, atque eaque soluta quasi provident illum? Numquam dignissimos autem dolore cumque laboriosam cum sapiente mollitia nesciunt quaerat labore ratione quod, corporis soluta natus porro eveniet eligendi et dolorum est ullam accusamus placeat?</p>
</div>
</div>
<div class="row secondRow pt-5 pb-5">
<div class="col-md-6 col-sm-12 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/window-art#2x.png');?>" width="446" height="471" class="d-inline-block img-fluid" alt="">
</div>
</div>
<div class="col-md-6 col-sm-12 thirdCol">
<ul class="list-display list-checkmarks">
<li ><span class="pfDinTextBold">This is a little bit of descripton</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, doloribus!</li>
<li ><span class="pfDinTextBold">This is a little bit more of a descripton</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, maiores.</li>
<li ><span class="pfDinTextBold">Takes some moer than describing</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, recusandae.</li>
<li ><span class="pfDinTextBold">Stripes are a better design then dots</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, deleniti.</li>
</ul>
<ul class="list-display listButton pt-4">
<li ><span><button type="button" class="btn buttonRed btn-block">configure button</button></span></li>
</ul>
</div>
</div>
</div>
<div class="container fourthSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Just the best for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nulla laborum nesciunt! Nam possimus amet quas nesciunt saepe non veritatis molestiae optio. Est a dicta placeat impedit recusandae, ipsum exercitationem blanditiis nostrum atque optio pariatur? Numquam illum eius, a eveniet ex et consequatur inventore in modi quibusdam, at repudiandae voluptatem. Adipisci odio dolor laudantium culpa quis debitis sint quae temporibus.</p>
</div>
</div>
<!-- <div class="row firstRow pt-5 pb-5 order-1"> -->
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container fifthSection">
<div class="row firstRow pt-5 pb-5 order-2">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some free samples?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium perspiciatis itaque quidem ex, aperiam, debitis natus eos ullam corporis quos a aliquid ratione officia cumque veritatis quas ipsam rem cupiditate harum, quo illum. Voluptatum itaque odit deleniti voluptatibus quia quam.</p>
<span><button type="button" class="btn buttonYellow btn-block">Configuration</button></span>
</div>
</div>
</div>
<div class="container sixthSection">
<div class="row SecondRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some text goes here</h2>
</div>
</diy>
<div class="row SecondRow pt-5 pb-5">
<div class="col-md-4 FirstCol">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi libero rerum explicabo? Incidunt laborum adipisci inventore ipsam expedita blanditiis sapiente atque tenetur? Provident facilis tempora ipsam veniam magnam nulla harum, eum fuga! Quis illum natus itaque nihil nulla hic molestiae doloribus molestias ab minus laborum exercitationem iure, sunt temporibus, provident ea maiores praesentium in beatae dolore fugiat alias mollitia adipisci at? Officia id nemo placeat, consectetur repellendus vel error beatae itaque, quibusdam hic maxime reprehenderit laudantium corporis. Dicta, sapiente consequatur, nisi veritatis rerum nesciunt consequuntur iusto qui esse autem soluta quam ipsam! Ut voluptatem doloribus nulla, assumenda praesentium distinctio laudantium reiciendis perferendis natus eveniet consequuntur minus at earum ex voluptatum asperiores, nesciunt, quisquam libero tempora? Asperiores molestias blanditiis, nobis minima architecto ea consequuntur minus nemo dolores perspiciatis, officia optio numquam aliquam placeat vel quia accusamus magni, laboriosam suscipit quaerat sit non odit adipisci molestiae. Deleniti rerum reprehenderit eius facere dolore.
</p>
</div>
<div class="col-md-4 SecondCol">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, sint obcaecati earum rerum dolore adipisci numquam exercitationem repudiandae quis, officiis sit? Nulla voluptatem sint incidunt. Perspiciatis aut sed alias aliquam, illum aliquid repudiandae cupiditate perferendis placeat harum repellendus enim accusamus, optio consequuntur officiis. Perspiciatis quam exercitationem quaerat neque, quidem voluptatem soluta numquam commodi voluptatum laudantium harum totam doloribus quibusdam? Vitae eveniet, at dolorum animi consectetur impedit earum dicta exercitationem accusamus autem pariatur doloremque optio suscipit ipsam maiores nam atque culpa incidunt deleniti. Modi nulla harum quae suscipit. Sint, inventore soluta eaque aperiam, nobis omnis aliquid quo quas consectetur veniam at quasi recusandae quaerat est eum fugit voluptatibus autem odit suscipit tempora error mollitia dignissimos incidunt in. Nihil expedita natus rem necessitatibus culpa corrupti ab, laborum earum magni quo. Voluptatum doloribus eligendi odio vitae dolorem aspernatur veniam itaque, laboriosam doloremque ea autem. Repellat dolor asperiores dolore voluptates excepturi, at nobis delectus!
</p>
</div>
<div class="col-md-4 ThirdCol">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat suscipit ad id voluptatem. Cupiditate nesciunt accusamus vero ea mollitia velit laudantium iusto, ipsa quibusdam, aliquid accusantium doloremque nulla quo numquam ducimus nostrum fugit labore iure saepe error? Odio officia, voluptatum cum architecto, natus hic veritatis sequi quae blanditiis molestiae, pariatur culpa. Officia voluptas earum reprehenderit ab accusantium nam iste sequi nesciunt ea laborum non aliquid eligendi, quaerat deleniti, necessitatibus sunt minima reiciendis. Dolore eum ipsam molestias nisi tenetur, enim quia corporis repellat, dolorem hic debitis. A reprehenderit voluptas dignissimos exercitationem laboriosam rerum distinctio consectetur qui recusandae natus, repellendus vitae quas, doloribus impedit mollitia, nihil veritatis quidem. Est, cum ipsam provident distinctio excepturi pariatur quasi labore perferendis unde ut, ullam possimus non fugiat a odio, rerum ab minus maxime architecto accusantium. Similique, sapiente ad! Ea delectus quis temporibus expedita natus quae nesciunt officia, architecto unde similique, facilis est aut! Quibusdam voluptatibus praesentium perspiciatis, voluptatum atque suscipit perferendis corporis sit dignissimos asperiores recusandae minus delectus nesciunt! Dicta necessitatibus similique veniam rerum beatae eligendi, inventore exercitationem autem id saepe quisquam est sequi cum aspernatur ipsa accusantium aut delectus harum nulla, quis facilis. Magnam ab, doloremque commodi obcaecati quam vero fugiat ea deserunt quis.
</p>
</div>
</div>
</div>
<?php
get_footer();
?>
header.php
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head();?>
</head>
<body>
<header>
<div class="container">
<div class="container topSection">
<div class="row justify-content-center mt-0 pt-0 pb-0">
<div class="col-sm-12 d-flex justify-content-center">
<span class="topSection d-flex align-items-center"><img src="<?php echo get_theme_file_uri('/images/icons8-in_transit copy.svg');?>" width="30" height="30" class="d-inline-block mr-1" alt="" loading="lazy"> Fsat shipping from our warehouse</span>
</div>
</div>
</div>
<div class="container">
<div class="row rowSectionNav align-items-center">
<div class="col-sm-12 justify-content-center">
<nav class="navbar navbar-expand-lg navbar-light bg-white navNoPaddingMargin">
<a class="navbar-brand d-flex align-items-center brandName" href="#"><img src="<?php echo get_theme_file_uri('/images/fensterfolie.svg');?>" width="40" height="40" class="d-inline-block align-top mr-2" alt="" loading="lazy">Logo <span style="color: #FF5A6E;font-family: Uni-Sans-Bold; font-size: 1.6rem" >+</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
footer.php
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">About</h5>
<ul class="list-unstyled">
<li>
<p>
Link1
</p>
</li>
<li>
<p>
Link2
</p>
</li>
<li>
<p>
Link3
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">Support</h5>
<ul class="list-unstyled">
<li>
<p>
contact us
</p>
</li>
<li>
<p>
FAQ
</p>
</li>
<li>
<p>
Delivers
</p>
</li>
<li>
<p>
Payment
</p>
</li>
<li>
<p>
Business
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Contact details -->
<h5 class="font-weight-bold text-uppercase mb-4">Our services</h5>
<ul class="list-unstyled">
<li>
<p>
<i class="fas fa-home mr-3"></i>free shipping</p>
</li>
<li>
<p>
<i class="fas fa-envelope mr-3"></i>correct</p>
</li>
<li>
<p>
<i class="fas fa-phone mr-3"></i>Simplicity</p>
</li>
<li>
<p>
<i class="fas fa-print mr-3"></i>Warranty</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">delivery</h5>
<!-- Facebook -->
<a type="button" class="btn-floating btn-fb">
<i class="fab fa-facebook-f"></i>
</a>
<!-- Twitter -->
<a type="button" class="btn-floating btn-tw">
<i class="fab fa-twitter"></i>
</a>
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">Secure</h5>
<!-- Google +-->
<a type="button" class="btn-floating btn-gplus">
<i class="fab fa-google-plus-g"></i>
</a>
<!-- Dribbble -->
<a type="button" class="btn-floating btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid row -->
<div class="row">
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<h5 class="font-weight-bold text-uppercase mb-4">Payments</h5>
<span><img src="<?php echo get_theme_file_uri('/images/paypal#2x.png');?>" width="60" height="20" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/sofort#2x.png');?>" width="77" height="24" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/mastercard#2x.png');?>" width="52" height="41" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/Visa#2x.png');?>" width="60" height="20" class="d-inline-block img-fluid" alt=""></span>
</div>
</div>
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
blabla.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<?php wp_footer();?>
</div>
</body>
</html>
functions.php
<?php
function wpbootstrap_enqueue_styles() {
wp_enqueue_style('boostrap_V4','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
wp_enqueue_style('font-awesome-new','https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_script('bootstrap_jquery', '//code.jquery.com/jquery-3.5.1.slim.min.js');
wp_enqueue_script('bootstrap_popper', '//cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js');
wp_enqueue_script('bootstrap_js', '//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');
function flt_files() {
wp_enqueue_style('fensterfolie_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'flt_files');
?>
problem solved: Did add the following to each individual div-container:
.containerClass {
min-height: 100%
}
I have a bootstrap based template that outputs a text with a button and an image. By checkbox you can select here that the picture appears either to the right or to the left of the text.
Now I have the problem that the text and button always appears above or below the picture in the mobile viewport. But I want the text and button to always appear below the picture.
I just can not figure out how to customize the template. Since I can not read the viewport size with PHP, I can not think of anything but JavaScript. Or is there a better and easier way?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Privatumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Büroumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Projektumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbelmontage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Mitarbeiterumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbellogistik</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
</body>
</html>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Privatumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Büroumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Projektumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbelmontage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Mitarbeiterumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbellogistik</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
That's what it looks like on desktop:
And that's what it looks like on mobile. Here, I just want the text always to appear under the picture and not over it:
I have solved it with the bootstrap classes d-flex and flex-column-reverse.
$(window).resize(function(){
// add bootstrap flex classes to :even rows if viewport is smaller then 1200px, remove otherwise
if ($(window).width() < 1200){
$('.services-section:even .row').addClass('d-flex flex-column-reverse');
}else{
$('.services-section:even .row').removeClass('d-flex flex-column-reverse');
}
});
My agenda is to show an image and Details side by side in laptop and in responsive show them individually.. It works in non-responsive page showing the details side by side with col-md-6, but the code doesnt accept col-sm-12 for showing the details induvidually in responsive state
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="col-img" src="reference/about-us/choice.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Use img-fluid to image(see Fiddle:https://jsfiddle.net/gpLyvr5w/6/)
Learn here:https://getbootstrap.com/docs/4.0/content/images/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
well the code class="col-md-6 col-sm-12 padding-0" means that at screen ≥576px the element should take full width (aka width:100%) of available width but if the screen is ≥768px then the element should take half the available width (aka width:50%).
So if you need your div containing image and div with details to be side by side on screens ≥768px (usually tablets in portrait mode) then simply use col-md-6 you don't need to specify col-sm-12 as by default div elements are block level elements and take full width of available space.
Also you don't need padding-0 class you can use Bootstrap 4's spacing classes such as p-0, p-1, p-3, pt-1, py-3 etc. to remove or add padding so your final classes should look like this:
class="col-md-6 p-0"
You Need to give the extra class in first col-md-6 i have given class name res and write a media query for that like these
<style>
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.res{
min-width:100%;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0 res">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Hi All i have Solved this issue.. had MISSED OUT WITH THE META TAG IN HEADER