I have the following website:
www.thewhozoo.com
It works fine on a desk top, but for some reason on a mobile device's browser, it has a grey bar down the side.
I have the following code:
css
body {
background-color: #4B5961;
width: 100%;
margin: 0;
}
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html
<body>
<div id="image-head" class="top-container">
The grey line down the side is the same as the background color of the body (#4B5961).
As you can see, I have the body width and the background image width both set at 100%. So I would not expect to see the grey line. I think it is a result of the scroll bar.
If anyone can advise how I can remove this, I would appreciate the help.
Check your style this css rule, take out the padding-left: 10px;:
.wz-title {
color: #B2D137;
font-weight: bold;
/* padding-left: 10px; */
font-size: 110%;
text-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 1px rgba(0,0,0,0.4);
}
Remove the padding with .wz-title. For some reason, removing padding fixes it.
.wz-title {
padding-left: 0;
}
Here:
Set overflow-x:hidden; on your body, that'll fix it:
body {
overflow-x:hidden;
}
Try this:
body, body * {
box-sizing: border-box;
}
By using above code you will never face any problem with padding ever. :)
Related
An issue I'm amazed I couldn't solve on my own. I can not seem to remove the standard white background from any text added to my page. I have tried being broad and making the body and p tags transparent as well as being specific with classes. No luck.
The white text background at the bottom
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.backgroundImage {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
body {
background: transparent;
background-color: transparent;
}
p {
background: transparent;
background-color: transparent;
}
.divText {
background: transparent;
background-color: transparent;
}
.text1 {
font-size: 40px;
background: transparent;
background-color: transparent;
}
<div class="backgroundImage"></div>
<div class="divText">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
If what you really want is to put the writing on top of the image, you can try this structure in your HTML, because there is actually no background there, it's just situated below the image. To position the text well over the image, you can try using flex-box.
*{
margin: 0;
padding: 0;
font-family: sans-serif;}
.backgroundImage{
background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;}
body {
background: transparent;
background-color: transparent;
}
.text1{
font-size: 40px;
}
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" href="luxStyle1.css">
</head>
<body>
<div class="backgroundImage">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
</body>
Source of this problem comes from the div with backgroundImage class, it is placed before the divText, and there are a few solutions that I can thing of right now:
Delete background image and place css code of it to .divText so the divText has that background (this is what my snippet shows, i also deleted extra lines that specify transparency, you don't need to necessarily delete them, I just wanted to get rid of it since there is no use for it anymore)
Same as number one but place the .backgroundImage class data to body so the whole page has the same background, No.1 solution affects the background of divText
Use position absolute to put .divText to inside of the .backgroundImage
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.backgroundImage {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
}
.divText {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(desk1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.text1 {
font-size: 40px;
}
<div class="divText">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
The background is transparent already because the body default background color is white, so to fix that just put the text inside the div with the backgound image like this:
<div class="backgroundImage">
<div class="divText">
<p class="text1">
many words are written here to take up lots and lots of space. i do this to test the scrolling of my background image thank you very very much
</p>
</div>
</div>
How do I eliminate the whitespace when the browser size changes if I am using background-size:contain;?
The whitespace between the image and the text is way too much with smaller browser sizes. site is: http://16debut.com/test.html
CSS is:
body {
margin:0px 0px;
}
#hero {
background-clip: content-box;
background-image: url("imgtop.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 235vh;
}
#content {
padding: 100px 50px;
text-align: center;
width: 80%;
margin: 0px auto;
}
#content h2 {
margin: 0px 0px 30px 0px;
}
#footer {
padding: 30px 0px;
text-align: center;
background: #ddd;
}
jsbin demo
You want to go fully responsive but keep the white clouds at the bottom?
Use two background images for the same element.
Cut out the white bottom clouds save as separate .png image. Use as first background-image.
(optional) Save again your bigger image, just without the white clouds. Use that image as second background image value.
Now in CSS:
set the clouds to background-position: bottom and 100% size ("width")
Set the bigger image to center (50%) position and cover
CSS
html, body{height:100%; margin:0;}
#hero{
position:relative;
height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
background: no-repeat
url(http://i.stack.imgur.com/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
url(http://i.stack.imgur.com/IVgpV.png) 50% / cover; /* BIG IMAGE */
}
HTML
<div id="hero"></div>
<div class="other">
<h1>Other Divs</h1>
<p>bla bla</p>
</div>
Seems that Safari is a quite stupid browser (they even removed support for windows since 2012... Amazing). Here's the jsBin example and css:
#hero{
position:relative;
height: 900px;
height: 100vh;
background: url(http://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(http://i.stack.imgur.com/IVgpV.png) 50%;
background-size: 100%, cover;
}
I have a Image which I want that takes the whole screen but is leaving some white space at the top and at the left side of the screen and I don't know why is doing it. I attached the code of it.
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Add this css line:
body{margin:0;}
http://jsfiddle.net/mm08hruf/
You need to reset the margin on the body.
/* margin reset */
body {
margin: 0px;
}
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Try
html,body{
padding:0;
margin:0;
}
I have the following CSS code:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 900px;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this http://i.imgur.com/RMyIO4Y.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that?
Thanks.
You can also set the height to
height: 100vh;
http://caniuse.com/#feat=viewport-units
Example css for Hero template:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 100vh;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
Use this:
background-size: 100% 100%
This should stretch it to 100% of both X and Y.
Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.
Imagining the div with the video part has a class of 'video-section', you could do:
#media (max-width: 600px) {
.video-section {
display: none;
}
}
I have the following snippet of HTML code which displays a button.
<span class="xp-b-submit xp-b-submit-btn xp-b-right">
Post Search
</span>
In addition to the HTML code, there is the CSS style sheet.
.xp-b-submit-btn {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("../../images/new_blue_button.png");
background-origin: padding-box;
background-position: -1px 50%;
background-repeat: no-repeat;
background-size: auto auto;
}
.xp-b-submit {
background-position: right -32px;
}
.xp-b-submit, .xp-b-leftSide, .xp-b-submit-large, .xp-b-submit-large .xp-b-leftSide {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("../images/buttonBG.png");
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto auto;
display: block;
}
.xp-b-right {
float: right;
}
The problem that I'm facing is the my button is not long enough. I want to extend it by about 20px but I'm quite new to CSS, and what I'm doing is taking pre-existing code, and modifying it. I've been playing around with the attributes in Firebug, but I have no idea where to start, what tabs are responsible for affecting what elements, etc.
Ok, here are a couple of options:
This changes the padding, adding 10px on each side, giving you something closer to the desired width. Presumably the padding is not already at 0, so it's not exactly 10px additional on each side. You can adjust to your liking. (Think of padding as the distance between your content/text and the edge of the container, which in this case is the button)
padding-left: 10px; padding-right: 10px;
This sets the exact width of the element (again, in this case that would be the button). Adjust the 500px value to match your needs.
width: 500px;
give the xp-t-bold class padding. That will increase the width of the parent span as well.
.xp-t-bold
{
padding:20px; // overall width will be increased by 40px.
}
I added width to your .xp-b-submit-btn class. (Also a border, so you could see what is happening... you can remove it.)
.xp-b-submit-btn {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("../../images/new_blue_button.png");
background-origin: padding-box;
background-position: -1px 50%;
background-repeat: no-repeat;
background-size: auto auto;
width:95px;
border:1px solid black;
}
http://jsfiddle.net/jasongennaro/HPVmv/