On my site I've got unwanted white margin on the right side, I don't know why. All containers on my site are contained-fluid, and also I added to my css no padding and no margins for containers.
html,
page {
width: 100%!important;
margin:0;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
padding-right:0px;
padding-left:0px;
color:#333;
}
container, container-fluid {
width:100%0!important;
padding:0!important;
margin:0!important;
}
I'd like to put a footer on down of site, I tried with position: absolute and margin-bottom, also tried overflow hidden but it doesn't work for me.
<div class="navbar navbar-inverse navbottom">
.navbottom {
background: url(../img/footer.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-color:#679003;
-moz-border-radius:0px;
border-radius: 0px;
border-style: none;
position: relative;
margin-top: -50px; /* negative value of footer height */
height: 50px;
clear:both;
padding-top:20px;
overflow:hidden;
margin-bottom:0!important;
full html and css
https://jsbin.com/biwuyewipi/edit?html,css,output
site:
http://fotozorza.pl/
Firefox inspector tells me that this is your top nav bar. I am not familiar with Wordpress, so sorry that I am not able to help you more.
Also inspector says, that the rest is fine.
this is because of google map width change it to 98vw.
EDIT :
add following snippet to css
.row{ margin-right:0px; margin-left:0px; }
and reduce the width of google map i_frame. this is the cause of problem.
Related
I am coding my website on CargoCollective. I wanted the home page to have a different background image than the rest, to be precise I wanted it to have a full-scale GIF, while the other pages should only have a background color. I did find the CSS code for the full-scale background, but the problem is that when I go first to the homepage and then to the other pages through the links of the sidebar, the background image remains, instead of turning to background-color. The weird fact is that whenever I refresh the pages or directly go to them (without passing from the homepage), that background image doesn't show up and it is the color I chose. What is the problem?
body {
background-color:#ffe0e0!important;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
body.home {
background: url(payload498.cargocollective.com/1/22/724019/12271389/gif14.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.pages {
background-color: #ffe0e0!important;
}
One way is to simply add the code inline on your home page:
<body style="url(background:url(myGif.gif) no-repeat 0 0;background-size: cover;"/>
A second way is to overwrite the css with javascript/jQuery when you load your home page:
$('body').css({'background-image': 'url(myGif.gif)', 'background-size':'cover'});
A third way is to simply add a full screen div with the background attached:
html,body{height:100%;padding:0;margin:0;}
body{
background:#000;
}
#coverDiv{
height:100%;
width:100%;
background:url(https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif);
background-size:cover;
}
<div id="coverDiv">
This div goes on my home page only.
</div>
Try adding this class to your style sheet. It will cover the case where you're navigating from your home page to another page. The rule for css is that the most specific class/selector wins in priority, the problem you were having is that body is more generic than body.home also it needs to be the same attribute, so background instead of background-color.
body.home.open {
background: #ffe0e0;
color: #f54a63;
font-family: sans-serif;
font-size: 14px;
text-align: left;
line-height: 2;
position: relative;
top: -40px;
width: 100%;
}
I'm having so difficulty making a my social div float right. I noticed when I add float:right the size of the body size changes which is why it is moving the div down a bit but without the float:right the body size is correct. how can I fix this?
Website
Here's my code:
#social{
width:102px;
height:34px;
padding-left:1%;
padding-top:1%;
}
body{
background-image: url('images/bg-2.jpg');
background-repeat: no-repeat;
background-position:bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-width: 100%;
overflow-x:hidden;
}
You don't even need to use float: right, please use the CSS below and this should work perfectly:
#social {
width: 100%;
height: 34px;
padding-right: 1%;
padding-left: 0%;
padding-top: 1%;
text-align: right;
}
#icons {
padding-right: 0.5%;
}
actually problem is with your margins, just adjust the margins on #block element than problem will be solved
for instance turn off the margin from #block(both left margin and top margin) and apply float:right to #social and see.
the issue is because of margin-top:15% on your #block.
add position: absolute; to your #block style, and then float:right your #social
that fixed the issue.....
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo
After looking for a few solutions here it seems everyone has the opposite problem that I'm facing (ha!). Here's what I'm trying to accomplish: I have a DIV that on page load is 100% width and 100% height. This is so that no mater the screen size we always get a full homepage image. However, we want to be able to scroll below that for additional content. I'm at a point where I have rigged it to work a bit but it's glitchy. Here's the HTML ::
<div id="ScalableImage"></div>
<div id="BlockWhite" style="height:1000px"></div>
<div id="BlockBlue1" style="height:300px"></div>
<div id="BlockBlue2" style="height:50px"></div>
You can see here that "BlockWhite" is styled to be 1000px tall. That's because it get's hidden behind the "ScalableImage". I can't get it to nest below!!!
Anyways, here's the CSS for the ScalableImage and the color blocks ::
#ScalableImage {
position: absolute;
display:block;
top:0;
left:0;
width:100%;
height:100%;
max-height:900px;
background: url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
}
#BlockBlue1 {
position:relative;
float:left;
background-color:#c5d1d1;
width:110%;
margin-left:-10px;
margin-bottom:-10px;
min-height:20px;
clear:both;
}
#BlockBlue2 {
position:relative;
float:left;
background-color:#95aab2;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}
#BlockWhite {
position:relative;
float:left;
background-color: #fff;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}
Ideas?
Thanks!
The reason why "#ScalableImage" overlaps "#BlockBlue1" is because you have position: absolute in your styling of "#ScalableImage" - so it gets pulled out of the layout, and as such covers other elements.
To achieve what (I think) you're looking for, you may want to remove that position:absolute style, then add:
body, html{
height:100%;
margin:0;
}
(The 0 margin is just in case the browser renders the body/html elements with a margin.)
I hope this is helpful for you. Good luck!
(Edit) Added a JSFiddle to show you what I'm seeing: http://jsfiddle.net/BDd62/
(Edit 2) Having seen your additional code, I think I've identified the reason for that white space. It's because of your top margin on "#htxt", which actually moves its parent element in this case. (You can read a more in-depth explanation of which this happens here. You can avoid this in a couple ways, but here are the changed areas in your CSS that I made. If this isn't the layout you wanted, please let me know:
#bg {
display:block;
width:100%;
height:100%;
max-height:900px;
background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
}
#htxt {
position:relative;
font-family: 'Raleway';
font-weight:bold;
font-size: 6em;
text-align:center;
color:#FFF;
width:80%;
max-width:960px;
line-height:100px;
margin:0 auto 22%;
padding:22% 0 0;
z-index:800;
}
#hsubtxt {
position:relative;
font-family: 'Raleway';
font-size: 3em;
text-align:center;
color:#FFF;
width:80%;
margin:2% auto 0;
z-index:800;
}
Hope this helps you out! Here's your updated JSFiddle to see the full code, but I suggest running it in a full browser (since your layout isn't optimized for the small window size of the JSFiddle environment.
I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)
As I add in divs within, the height changes and the layout gets out of hand.
what I want is really simple, something like the image shown
[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ]
I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)
So I made something such as
<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>
by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.
As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?
EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)
The fiddle: http://jsfiddle.net/Nu2wH/
html, body {
height: 100%:
padding: 0;
margin: 0;
}
#page {
background: #444444;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}
#sidecolumn {
width: 45%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
float: left;
}
#sidebar {
background: #ddd;
}
#maincolumn {
padding: 5%;
width: 40%;
float: right;
background: #AA9933;
height: 100%:
}
#content {
background: #ddd;
}
You Can Use the css 3 declaration background-size, for all browsers
background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}
Not very conventional but works :)