I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added using overflow-x: hidden to the body. You can see it in action here.
HTML
<div class="container"> <div class="level"></div> <div class="level purple"></div> <div class="level"></div> </div> CSS
html, body { overflow-x: hidden; } .container { width:960px; margin: 0 auto; border:1px solid black; } .level { height:100px; background: #bada55; } .purple { position: relative; background: #663399; } .purple:before, .purple:after { content: ""; position: absolute; background: #663399; /* Match the background */ top: 0; bottom: 0; width: 9999px; /* some huge width */ } .purple:before { right: 100%; } .purple:after { left: 100%; } 5 Answers
Answers 1
I checked in the link(www.kampuster.com) you shared and found the problem with your code.
Problem: In file all/themes/bootstrap_kampuster/css/style.css, you have provided width: 9999px; for classes .homeBanner:before, .homeBanner:after and .countUpSection:before, .countUpSection:after which is causing the whole problem and is not the right way to do it.
Suggestion: Below is the approach I would suggest you to go with. Here is a pen to better illustrate the suggestion.
.section-first, .section-third { background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg'); background-attachment: fixed; background-size: cover; } .section-first-inner { background-color: rgba(83, 192, 183, 0.3); } .section-first, .section-second, .section-third { /* this is just to add height inplace of content */ height: 600px; color: #ffffff; overflow: hidden; } .section-first-inner, .section-second-inner, .section-third-inner { padding: 20px 20px; font-size: 18px; height: 100%; } .section-second { color: #000; }<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> </head> <body> <div class="main-container"> <header id="page-header"></header> <div class="section-first"> <div class="section-first-inner"> <div class="container"> <div class="row"> <div class="col-sm-12"> Your content for section first goes here </div> </div> </div> </div> </div> <div class="section-second"> <div class="section-second-inner"> <div class="container"> <div class="row"> <div class="col-sm-12"> Your content for section second goes here </div> </div> </div> </div> </div> <div class="section-third"> <div class="section-third-inner"> <div class="container"> <div class="row"> <div class="col-sm-12">Your content for section third goes here</div> </div> </div> </div> </div> </div> </body> </html>Answers 2
Instead of setting width:960px; on the container try setting view width: width: 100vw;
So the container css will be:
.container { width: 100vw; margin: 0 auto; border:1px solid black; } Answers 3
just use .container-fluid class.
<div class="container-fluid" style="background-image:url('xample.jpg')"> <div class="row"> <div class="col-sm-12"> <div class="container"> <div class="row"> <div class="col-sm-12"> your content here </div> </div> </div> </div> </div> Answers 4
Full width background inside Bootstrap container!!
If this is what you want (Example Demo)
Then simply use Relative Lengths :
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
I have only replaced 2 values in your code:
.container { width:100vw; }.purple:after { width: 100vw; /* some huge width */ }
Code:
<!-- Latest compiled and minified CSS --> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- jQuery library --> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script> <!-- Latest compiled JavaScript --> < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>html, body { overflow-x: hidden; } .container { width: 100vw; margin: 0 auto; border: 1px solid black; } .level { height: 100vh; background: #bada55; } .purple { position: relative; background: #663399; } .purple:before, .purple:after { content: ""; position: absolute; background: #663399; /* Match the background */ top: 0; bottom: 0; width: 100vw; /* some huge width */ } .purple:before { right: 100%; } .purple:after { left: 100%; }<div class="container"> <div class="level"></div> <div class="level purple"></div> <div class="level"></div> </div>Answers 5
Please try this, this is working for me.
add the below css, if doesn't work try adding important to them. And to get full width of container, add container-fluid class to particular container.
html, body { width: -webkit-fill-available; overflow-x: hidden; } 
0 comments:
Post a Comment