I just found out that my website is scrolling horizontally on mobile. However, I am not able to find out why this is happening.
The containers and body seem to have the correct width when I check it in my browser.
Any idea?
https://www.urban-zweirad.de
Cheers,
Mark
There is some extra margin on your header or navigation which is having more width than your body/container.
add overflow-x:hidden in body
body{
overflow-x:hidden
}
it seems line number 204 from _pages.scss is creating issue
.teaser {
padding: 0!important;
}
try removing this.
The problem is in your class named "main"
what you need to do is to add css property : overflow:hidden;
.main{
overflow:hidden
}
think this might help you.
Your problem lies in this part of your HTML. #pons awnsered correct.
<div class="container-fluid center teaser" data-plim="495">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
How can you fix it? You could remove the .row class. As this is not neccessary because its a full width bootstrap col. And the .container-fluid allready clearfixes the floats.
You also just could change the CSS of the .teaser class into:
.teaser {
padding: 0 !important;
overflow: hidden; // This fixes the negative margin on the row to be hidden inside its parent.
}
Add the following css to body tag
.body{
..
..
width: calc(100% - 8px);
}
Related
I am attempting to create a footer tag to change the background color of it.
footer {
display: block;
background-color: #92a8d1 !important;
}
<footer>
<div class="container-fluid" name="footer">
</div>
</footer>
Code
Code
Could someone help me fix the code for CSS color displays on the footer?
I cant comment yet so will just answer here. You might not have a height for your footer, that is why it is not showing. Try setting a height like:
footer {
/*display: block;*/ /*remove this, footer is already a block element*/
height: 200px;
background-color: #92a8d1 !important;
}
This might help. You can send a sample/plunk of your code in order for us to help you better.
This is because the footer does have to be inside the body. After the body comes only the closing html-Tag.
If you want a footer for your page, add it before the closing body Tag. This is the same behaviour as if you would have a p-tag in another p-tag. The browser auto corrects your errors and places them next to each other.
If I got your question right this should work :
<footer style="background-color: #92a8d1;">
<div class="container-fluid"> </div>
</footer>
I think the background-color is overwritten by an other style.
I try to solve this problem for hours ...
I tried a few tricks, some small hack, I also tried to add positions "relative, absolute...Etc", some "top", top add a invisible not fixed div behind the fixed and others, but I want the cleanest solution possible and to know WHY have I got this problem.
: I have a menu "fixed" to the top, and a header.
The header is behind the menu (normal), but the problem is that when I add a margin to the header, it adds a margin to the body, while I want to add margin to the header INSIDE the body, just place the header under the menu without position:relative+top:Xpx.
And use "box-sizing: border-box" doesn't change anything
http://jsfiddle.net/WdNz4/
<div id="menu">
</div>
<div id="header">
test1(Success)<br>test2<br>test3(Lose)<br>test4<br>test5
</div>
(can't post my css, little bug, go to jsfiddle)
Thanx in advance for your help !
Add top:0; property to your #menu:
#menu {
height: 40px;
width: 100%;
position: fixed;
background-color: red;
top:0;
}
JSFiddle: http://jsfiddle.net/WdNz4/4/
Just use float:left; this will set your block outside the body structure, so that way you can position it anyway you want.
Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents
i need both has full-height has to come to bottom of the screen even there is very low contents.
now it looks like
here my fiddle
demo
moreover i tried full height for body and html to
body, html{
height:100%;
}
(relevant) HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(relevant) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
Running Demo
I used normalized.css to reset the styles and avoid the default margins otherwise applied to the display: table; div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT: added the transparent spacer.
Use :
display: table-cell
Here's the result:
http://jsfiddle.net/GhxQL/6/
You've got the right CSS in your fiddle; you just have some errors in the code.
Make sure your lines of CSS end in ; instead of : – there are a few lines in which you have colons instead of semicolons. And change your first line from htm, body to html, body.
Updated fiddle: http://jsfiddle.net/hqkVh/7/
Ok Let's make the equation HARDER !!
so if you have RESPONSIVE WEB DESIGN and WANT TO USE BOTH HEIGHT and MIN-HEIGHT and also Height All the Time 100% What's THEN ?
if you use HEIGHT 100%, u cant handle All of the content of your columns, It's obvious by resizing the browser the Height is 100% and the content dont show completely
You might wanna CHECK THIS SOLUTION from my own question, the MIN-HEIGHT Solution
PLEASE CONSIDER THESE QUESTIONS ARE NOT DIFFERENT JUST THE WAY OF ASKING IS DIFFERENT
I suggest Use Min-Height 100% and Height Auto
I have the page with the structure:
<div id="container">
<div id="header">top menu</div>
<div id="content">content</div>
<div id ="footer" align="center">
<div class="left">left part of footer menu</div>
<div class="right">right part of footer menu</div>
</div>
</div>
Css style:
#container {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#content {
padding:0em 0em 12em;
}
#footer {
position:absolute;
width:100%;
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
That works fine in all browsers. But when I add
<script type="text/javascript"></script>
inside
<div class="left">
in FireFox(only) the part of footer after the script come up to the top - between header and content divs.
What's wrong with it?
UPD
This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out.
The #footer has absolute position and is inside the relatively positioned #container div so I would expect this. Maybe try making container absolutley positioned.
Also I think your markup is not what you intended. There are one too many opening div tags.
change the #container height from auto to 100% and remove the extra lines for height.
The auto is messing up the calculations as it overrides the 100% lines due to the !important value
Since #footer's position is absolute, with bottom 0, it will be positioned relative to its first (non statically positioned) parent, which is #container. Essentially what's happening here is that #container is becoming mush less high, and dragging #footer with it.
That's happening because you have two height: settings in the css for #container (somehow the script tag triggers it to refresh) so the behaviour would be undefined.
If you're trying to make the footer stick to the bottom of the window, including as it's resized, I'd advise having a javascript function handle it, triggered by the window's resize event (it's fairly simple, see this question on javascript window resize event
You could try the CSS a different way with absolute positioning. I try and avoid float as it can lead to unexpected rendering issues. See this jsFiddle for an alternate approach. Working in IE6, Chrome12 and FF3.6 and FF4 for me.
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.