I am hoping one of you CSS gurus can help me pinpoint why my code isn't working! Here's my site:
http://ledvideowall.net
When the browser window is > 600 pixels, the "CALL US" menu item is floating right and vertically centered in the menu bar. (on FireFox and Chrome)
But, when the browser < 600 pixels, the menu item no longer floats right. And, on Chrome and iOS devices, the menu item is placed vertically below the menu bar. (very difficult to see!)
Any ideas?
add width:100% to .nav-menu in css file.
Well I am not getting this issue. However,
You should not be including that in the same ul. Instead, you should make a separate div and float that to the right (float:right;), and put the actual menu separately floated to the left (float:left;).
p.s. DO NOT add width: 100% to .nav-menu. This only resolves a symptom not the main problem.
Related
I'm trying to use the Google Sign-In button in a fullscreen Angular Material layout (based on https://github.com/angular/material-start), but as soon as it renders, the page layout grows just slightly taller than full screen. For example you can scroll down just a little bit past the supposedly full-height side navigation and see its drop shadow.
What is the button doing to my layout, and how do I fix fullscreen layout while using the button?
This can be fixed by adding a style to the embedding page, to display: none the iframe, which is otherwise a 1-pixel affair shoved offscreen to the side. In my testing it still does its job when completely hidden.
I am a beginner using Xcode 7 beta, working off a tutorial that uses Xcode 6. In the tutorial, the instructor selects Editor, Pin, and Horizontal Spacing to pin the space between two images so that it stays the same when switching to landscape. In Xcode 7, the Editor menu doesn't include a Pin menu. Does anyone know how to pin horizontal spacing between two images in the new Xcode 7?
This is close to what you need
You can choose View (current distance = 0) from the drop down menu
Use the pin button at the bottom right corner of the storyboard view. It looks like a Tie-fighter icon.
You will also notice that Pinning two elements to each other for horizontal and vertical spacing is not there. Instead select the left item and add a right constraint. Then select the right one and add a left constraint. You will see the horizontal spacing indicator appearing between the two. YMMV.
EDIT
If you are going thru the same tutorial (RW) as I am going thru, fear not! The control-drag between elements still works the same and brings the options XCode 6 shows in a similar way (ex: ctrl-drag from left to right way brings a popup menu with horizontal spacing.) I hope this helps.
Just to kind of clear this (good) answer up - select the left image, then the "pin" icon (tie fighter looking thing), click the right constraint icon at the top that looks like this:
|--|
...leave the value of it where it is. Then click the "add constraints" button. Do the same for the right image. Then run the app and verify that it works.
I've almost pulled out all my hairs and I can't seem to find a solution. After searching and watching dozens of tutorials I'm asking here.
I have an iOS universal project in which I have only 1 webview. The whole project is set to landscape. Unfortunately it seems I cannot get this webview run in fullscreen. Whenever I have it running on my iPhone 5 the webview is only visible partially on my phone. The view is a square and centered horizontally and vertically. In landscape mode it reaches top to bottom but on the left and right side I have empty room the view did not reach.
Anyway I think it has something to do with the new storyboard feature stuff in xcode 6, but somehow I don't seem to be able to the make it working as I intend.
As said in the beginning I watched several tutorials but none of em where with only a fullscreen webview. If anyone can give me a push in the right direction I'd be glad.
Thanks in advance.
Edit:
I've added a screenshot of my project:
Hold down 'Ctrl' on keyboard.
Click and hold down click the 'Web View' item in the 'view controller scene' content list on left.
Drag the 'Web View' item up to the 'View' item in the 'view controller scene' content list on left. ( You will see blue line to link the items )
A pop up menu will appear as to how you wish the two items to interact.
There you can select, 'Equals Width', and 'Equals Height'.
Reset all the constraints of the UIWebView and then add the following four constraints:
Trailing space to superview -16
Leading space to superview - 16
Top space to container/superview - 0
Bottom space to container/superview - 0
This will make the UIWebView fullscreen and centered to the UIView.
I finally was able to found a solution to my problem. Thanks for everybody who tried to help me - it seems I was unable to properly describe my problem.
The solution to my problem was found here:
Black bars showing when running app on iOS 7 (4 inch retina display)
I have a site with a fixed header and slide-out sidebars. With iOS7 in portrait orientation, the fixed header stays fixed when the sidebar is visible, but on iOS8 the header pushes slightly upward depending on how far down you are scrolled. I need it to stay fixed.
See this jsbin: http://jsbin.com/xuyevi/2/
The main pieces are a header, a sidebar, and the main content. The header is fixed to the top of the screen using fixed position and has a z-index that keeps it above the content when you are scrolling.
The sidebar is fixed to the left side of the screen, and is initially hidden by being translated left by its own width.
To open the sidebar, each of the header, content, and sidebars are translated to the right by the width of the sidebar.
Again, this works perfectly on iOS7 and all other browsers that support translate3d, and it even works correctly in iOS8 when in landscape orientation. But in iOS8 in portrait, the fixed header will slide off the screen based on how far down the user is scrolled.
Further, using the Safari inspector shows that the menu items on screen are offset from their expected positions. I.e. selecting an element in the inspector highlights an area on the screen that is offset from the actual location where it's rendered.
Has anyone else run into this? Anyone know a fix?
EDIT: The inspector thinks that the fixed position header is exactly where it should be, even though it's actually getting pushed off screen.
A little late to the party, but adding
html, body {
overflow-x: hidden;
overflow-y: scroll;
}
Will fix the offset scrolling on fixed elements that are offset (eg. left:20px) in iOS 8.
I had a similar issue on iOS using multiple fixed position elements and a CSS animated off-canvas nav. On a long page the upward "drift" was a blocker because it eventually increased to the point where it hid the nav trigger, making it impossible to close the menu. I tried extensively to find a fix and settled on a workaround: scroll back to top before animating. (#ocnTrigger is my off-canvas menu trigger.)
$('#ocnTrigger').click(function(){
$('body').animate({
scrollTop: 0
}, 0);
});
I was trying to do something similar (see here and here) then found that Apple has published a technical note recommending that fixed positioning be avoided. I swear it worked fine in iOS 7, but now with iOS8 it no longer "sticks".
This problem seems closely related to setting this meta tag:
<meta name="viewport" content="width=device-width">
See also: Fix div to bottom without using css position
I have a bunch of controls that start off hidden. When the Options button is clicked, the controls are displayed in a drop down box with a border. On Chrome, when the box is expanded, it looks like the left hand border is pushing the right hand border out of alignment with the button.
The drop down look like this:
See http://jsfiddle.net/Qs2zp/ for the code for this example.
If I remove the left hand border, the right hand border falls into place
See http://jsfiddle.net/Qs2zp/1/ for the example without the left hand border.
I am not able to reproduce this problem in Firefox or IE.
Has anyone else ever seen anything like this before?
Thanks
Is this acceptable? The CSS I added is in #controls-title and .options-dropdown-expanded. I basically set a left padding on the title bar that gets removed when the dropdown is expanded so that the left border doesn't shift the title bar to the right when it appears. I also set a -2px right margin when the dropdown is expanded so that the right border pops in rather than jutting out.