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%;
}
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>
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;
}
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>
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>
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;
}
Related
I have to put several images and texts on the site and they should be in the same position as the background image but when I minimize the screen size the proportionality is lost, I tried with an image of the text that I needed and it worked for me but I can not do that work with texts
Thank you very much for your help i've just been stuck for the hole day trying to find the solution
.title {
width: 74.5%;
}
/*text image png
.title.s1{
position: absolute;
margin-top: 36%;
}
/*text in h1*/
h1.title.s1 {
color: rgb(60, 255, 0);
position: absolute;
margin-top: 34.5%;
margin-bottom: 0;
text-align: center;
display: inline;
}
<div id="r_bg-img">
<img src="/img/rokubun_background.png" width="100%">
</div>
<div class="content">
<img src="/img/title1.png" class="title s1" >
<h1 class="title s1">The premise</h1>
</div>
In the link there's the output , the gray text is added as an img and the green text is added as a and below those elements the background titles are in orange
If you want to make your contents propotional, you can use the styles like below.
We can use the padding-top property as a percentage to make the gap between your contents like headers and images.
Here this is an example I tried, You can apply the styles properly for our contents. It is easy to create an outer and inner containers to keep the contents like headers and images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 100%;
height:100%;/* 1:1 Aspect Ratio */
}
.container .outer {
width: 100%;
padding-top: 5%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
text-align:center;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
img {
display: block;
width: 50%;
height: 50%;
padding: 0% 25%;
}
h1 {
margin:auto;
color: rgb(60, 255, 0);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
<div class="outer">
<h1 class="inner">Your content</h1>
</div>
<div class="outer">
<img src ="https://www.pngmart.com/files/13/Tetris-PNG-Free-Download.png">
</div>
</div>
</body>
</html>
You can follow this to get an idea https://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements#:~:text=For%20proportional%20resizing%20purposes%2C%20it,the%20aspect%20ratio%20you%20need.&text=And%20that's%20it!
Hope this will help you and think this is what you want to do.
I have a simple page: 5 rows (4 rows explicitly defined height [header, bredcrumb, trademark, footer], 1 row set to 100% [content]) that all display on a web page.
However, my CSS renders perfectly in Firefox, Chrome, Internet Explorer and Safari. Opera hates me and adds a scrollbar.
How do I structure the CSS so that this fits all 5 browsers, without adding a scrollbar to ANY browser?
HTML:
<html>
<head>
</head>
<body>
<div class='header'>
</div>
<div class='breadcrumb'>
</div>
<div class='content'>
<div class='panels'>
<div class='panel-a'>
</div>
<div class='panel-b'>
</div>
<div class='panel-c'>
</div>
</div>
</div>
<div class='trademark'>
</div>
<div class='footer'>
</div>
</body>
</html>
CSS:
div.header,
div.breadcrumb,
div.content,
div.trademark,
div.footer {
display: table-row;
width: 100.00%;
}
div.header {
height: 2em;
}
div.breadcrumb {
height: 1.5em;
}
div.content {
height: 100%;
}
div.panels {
display: table-cell;
height: 100%;
width: 100%;
}
div.panel-table {
display: table;
height: 100%;
width: 100%;
}
div.panel-a,
div.panel-b,
div.panel-c {
display: table-cell;
}
div.trademark {
height: 1.25em;
}
div.footer {
height: 2em;
}
I cannot test it due to not having opera but my guess would be that you need to remove padding and margins from body
html, body{
padding: 0;
margin: 0;
}
I created a sample of the situation in JSFiddle
I updated JSFiddle Here: http://jsfiddle.net/x11joex11/r5spu85z/8/ (this shows in more detail how the sticky footer works so well, just height issue).
I want the table to take up the remaining height, for some reason the height: 100% is not working?
From my tests it appears to be related to min-height: 100%. I need that to make the sticky footer work.
So a solution for me is another way to do the sticky footer, or a way to still give 100% height to the elements within.
HTML
<div class="wrapper">
<div class="wrapper_content">
<!--Header-->
<div class="header">Header</div>
<div class="content table">
<div class="row">
<div class="l_cell">left</div>
<div class="r_cell">right</div>
</div>
</div>
<div class="push"></div>
</div>
</div>
<!--Footer-->
<div class="footer">Footer</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px;
background-color: black;
}
.container {
}
.table {
display: table;
height: 100%;
width: 100%;
background-color: yellow;
}
.row {
display: table-row;
}
.l_cell {
display: table-cell;
width: 265px;
background-color: orange;
}
.r_cell {
display: table-cell;
background-color: purple;
}
.header {
background-color: red;
width: 100%;
}
.footer {
height: 50px;
background-color: green;
}
.push {
height: 50px;
}
Here is one solution, http://jsfiddle.net/7t4RT/
This question has been asked many times before. I recommend viewing some of the answers already provided here at StackOverflow.
The reason that we're unable to use height: 100% in your example is because no height has defined. The CSS is wondering... well how high is 100%? There are many ways to get our elements to fill their containers in either HTML or CSS. Simply choose one you feel works better for you.
The following is one of many ways to solve this problem.
HTML:
<div class="fill-height">
<p>Filled</p>
</div>
<div class="cant-fill-height">
<p>Not Filled</p>
</div>
CSS:
body {
background-color: #ccc;
}
.fill-height {
background-color: #0ff;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.cant-fill-height {
background-color: #ff0;
width: 200px;
height: 100%;
margin-left: 200px;
}
I found an answer to my problem for now, but it requires the use of display:table which I recall causes other errors down the road, but it does appear to work right now to create the layout I had in mind.
http://jsfiddle.net/x11joex11/r5spu85z/10/
CSS
body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
height:100%;
width:100%;
display:table;
background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}
HTML
<div class="wrapper table">
<div class="header row">
Header<br/>
Header2
</div>
<div class="content table">
<div class="row">
<div class="cell left">leftt<br/>left2</div>
<div class="cell right">right<br/>right2</div>
</div>
</div>
<div class="footer row">
Footer
<br/>
Footer2
</div>
</div>
An answer not requiring the use of display:table or table tags is preferred.
Notice the sticky footer effect remains.
I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was wondering if there was any way with css to do this. I have already tried the padding+margin hack, but it didn't work.
HTML:
<div class="container">
<div class="row-fluid">
<div class="main span12">
<div class="row-fluid blue"> <!--this is the div that needs the background-->
<div class="span4">some content</div>
<div class="span4">some content</div>
<div class="span4">some content</div>
</div>
<div class="row-fluid">
<div class="span12"> some other content, doesn't need the background</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. I tried this one : http://www.sitepoint.com/css-extend-full-width-bars/ but it didn't work.
Based on this article from CSS Tricks (Full Width Browser Bars ).
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%;
}
Codepen Demo
Support should be IE8 & up
What I would like to achieve (the goal)...
I'm trying to display a row of images (with the image name below the image) in html, like so:
When a user clicks on an image I want a square to appear over the image, to indicated selection like so (user has clicked on Tile1):
What I have done so far...
So far I have managed to display the tiles in a row:
Here's the html code that produced the image above:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="default_tiles_view_square" id="tile2">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
And the CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.default_tiles_view_square {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
And a fiddle showing the example above: http://jsfiddle.net/jamiefearon/t8d6U/
The strategy to achieve the goal...
I was thinking about wrapping the image and its title in a div, and then changing the background colour of the div. Here is the result and the code:
HTML:
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS:
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
#tile1 {
background-color:red;
}
The Problem..
It does not look good, and the actual image is not covered by the red colour. Maybe it would be possible to overlay a div over the wrap div, set it's opacity < 1 and change its background colour.
What do think? Does anyone have any ideas of a good way to achieve the goal?
Something like this should do the trick: http://jsfiddle.net/t8d6U/1/
So just hide the overlay DIVs initially with display:none (or e.g. left:-9999px) then show them onClick.
CSS:
#default_tiles_view {
overflow: auto;
}
.default_tiles_view_square {
float: left;
margin: 5px 10px 10px 10px;
position: relative;
height: 128px;
width: 128px;
}
.default_tiles_view_square p {
text-align: center;
}
.content {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.overlay {
position: absolute;
z-index: 2;
background: red;
opacity: 0.5;
height: 128px;
width: 128px;
top: 0;
left: 0;
}
HTML:
<div id='default_tiles_view'>
<div class="default_tiles_view_square" id="tile1">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
<div class="overlay"></div>
</div>
<div class="default_tiles_view_square" id="tile2">
<div class="content">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
<div class="overlay"></div>
</div>
</div>
I have taken what Gaurav said in the comments, changing the opacity:
HTML
<div id='default_tiles_view'>
<div class="tile_wrap" id="tile1">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/tile.png">
<p>Tile1</p>
</div>
</div>
<div class="tile_wrap" id="tile2">
<div class="default_tiles_view_square">
<img src="https://raw.github.com/andrespagella/Making-Isometric-Real-time-Games/master/img/dirt.png">
<p>Tile2</p>
</div>
</div>
</div>
CSS
#default_tiles_view {
width: 490px;
height: 160px;
overflow-y: auto;
}
#tile1:hover{
background:red;
opacity:0.4;
}
.tile_wrap {
display: inline-block;
}
.default_tiles_view_square p {
text-align: center;
}
Fiddle: http://jsfiddle.net/jamiefearon/BY9Fp/
Hover over Tile1 to see the effect.