I am currently struggling with the CSS of my mobile-view pages (handehlds, for example iphone in portrait view). Strangely, there is an approximate margin of 90 pixels to the right of the body/content container. I simply do not get the reason for that - any idea?
See it here:
http://quirktools.com/screenfly/#u=http%3A//bigbertha.golfanatics.de/testsite/&w=320&h=480&a=33&s=1
URL: http://bigbertha.golfanatics.de/testsite/index.php
Thank you in advance for any hints! best regards, Ralph
What you can do, is this.
body {
overflow-x:hidden;
}
This will remove the scroll bars on mobile. (from left to right)
Edit: I took another look at your site, and noticed that you have this on your html element
html {
overflow-y:scroll;
}
Remove that line, and voila :)
You have explicit width to #roksearch_results and you just apply opacity: 0;. You have to display: none; to this div ( or change the width to 100%).
#roksearch_result {
display: none;
}
And you also give scew transform to socialmedia navigation which goes beyond your width. You could overflow: hidden the navigation but this would hide the corners of the scewed socials so I would suggest to overflow-x:hidden to the body.
#body {
overflow-x: hidden;
}
Related
I am working on a small Web-App. I want to make it responsive for smaller devices. Problem is, on mobile, the sidebar is not scrollable to see the last item on bottom, and i don't know how to make it look good on mobile screen.
Solution would be something like:
#media (max-width: 500px) {
#sidebar {
height: 100vh;
}
}
but this isn't working and idk why. any ideas?
The elements of you nav bar have heights, padding, border, margin.. in px or em.
They add up and overflow your height: 100vh.
The easiest solution is like Bob Farias suggested to add overflow-y: auto or overflow-y: scroll to
#sidebar {
height: 100vh;
}
There are more laborious way to avoid scrolling and overflowing whom would be for example setting your elements "heights" to be fractions of 100vh, or redesigning your nav bar.
You can try this inside your "nav" tag
height: 100%;
overflow: scroll;
It's because you working with pixels. It's better for responsive sites to work with a percentage number. Also, try to search for "overflow" propriety
The problem is that on mobile browsers such as Safari or Chrome, the browser's toolbar isn't taken into consideration. You can check out a more detail answer here.
A solution to this problem can be found here.
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
I am trying to tweak a wordpress site but can't seem to get one of my parent div's backgrounds to be visible through the child divs on top. I've got the background image set for #main. The image I'm using fades to white at the bottom but, in the rendered page, I can only see about the top 23 pixels or so before the rest is blocked...I think by #primary.
The site uses a child theme based on Responsive and can currently be viewed here. I would copy/paste code for your convenience but I'm no longer certain what part of the code is responsible for what I'm (not) seeing. So I apologize in advance if this is not enough information to go on :-/
Looks to me like you have a float problem and the div#main is collapsing. Try one of the various clear-float techniques to prevent that.
For example, try #main { overflow: hidden } as a test - that will normally prevent the collapse.
Classic clear fix issue. Give #main an overflow:hidden or try the micro clear fix if any content is spilling out of the box.
#main {
background: url("http://wp.massosteopathic.org/wp-content/uploads/2013/02/headerhand-contd.jpg") no-repeat scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 1.625em 0 0;
z-index: 1;
}
The #main div is only 24px high. This is because all child divs are floating.
add a
<div class='clear'>
with
.clear { clear: both}
just before the closing tag of your #main
The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below.
How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of apdding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
Adding a padding like that is not enough if you're using responsive
bootstrap. In this case when you resize your window you'll get a gap
between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source:
Twitter Bootstrap - top nav bar blocking top content of the page
you can try this one. it works in any size of display.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }