I have been designed a web site which top menu has fixed position
every thing is Okay, the site is not responsive. but in mobile the top menu stick to left,but it must be at center.
please help me, what can I do??
the website : http://www.infinitypub.com/
Remove both width and max-width from the body element. I suspect you're trying to center the page, but you're doing it in an incorrect way.
Related
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
I'm struggling with this website I made using webflow.io
It displays perfectly on desktop, but on mobile I get a white margin or padding on the right side that completely damages the site. I've tried to debug the code but can't find the culprit.
Any help would be appreciated.
The problem seems to be coming from the "Describe your app" section image sliding in from the right.
Adding overflow:hidden to the parent element should fix this or work on making the image absolute.
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
To preface this question, I am very VERY new to html/CSS so go easy on me please :)
I am currently designing a web-page that has a fixed position header at the top. The header contains a logo, some drop-down menus, and a right floated container showing the name of the person currently logged in.
The problem that happens is if I re-size the screen to be smaller, the elements of the header wrap onto the next line.
The gray background is a parent div (holding the logo, the drop down menus, and the logged in info) with a width of 100%, a fixed height and fixed position. I initially had the logo and the list of menus set to float:left to keep them in-line, but have been playing around with display:inline-block to see if that can help anything (sadly, it hasn't much). The container all the way on the right holding "Logged in as Alex " is set to float: right
I have tried giving the header bar a fixed width, as well as setting its overflow to auto - neither option fixed the problem.
In my perfect world, at the point where the content begins to wrap now, I would like the entire page to horizontally scroll instead of pushing the content to the next line. A good example of the functionality I'm looking for is the top bar on Youtube, where the items squish together as you minimize the screen and the page starts to scroll horizontally when they can't be squished any closer.
I've been struggling with this for many hours over the last few days, and happy help or direction would be greatly appreciated. Thanks :)
I tried to post images but I don't have enough reputation. I have images that I could find a way to send of before-after resizing if anyone wants
You can specify
min-width
and/or
min-height
:)
overflow is your friend:
Use overflow:scroll on the container, that should fix it. More on overflow here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)