I'm attempting to help a friend with her site jessheading.com
She's using a WordPress theme and the WP Touch mobile plugin. But when someone clicks to view the full-site version on mobile, the orange box with the quote part way down the page runs off to the side when you zoom out (creating a sort of side-scroll).
The CSS on that box is:
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
}
How can I fix the CSS or the viewport settings to prevent zooming out so far so that that orange box overflows to the right?
Parent of the box:
{
overflow-y: auto
}
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
overflow: hidden;
}
this merely clips overflow, and the rest of the content will be invisible
some other things to consider is to resize the whole orange box as well as the tags with it.
other overflow css you can try are: scroll, auto, etc.
quite possibly even set the width of the orange box to be fixed and display it within a div tag that has a background of orange.
hope this helps
Related
I am using the default Lightbox2 for my website. When clicking an image, the Lightbox works perfectly except that the box (along with the darkened background) appear at the top of the page, rather than in it's scroll position. This only happens on the iPad. Is there something to adjust in the lightbox.css that I am missing?
Thank you in advance!
use this css to dark background,give fixed position using css also make top, left,right, bottom to 0 so it fits to screen and content inner to it will scroll using overflow auto css
position: fixed;
z-index: 999;
/* padding-top: 100px; */
left: 0;
top: 0;
bottom:0;
right:0;
overflow: auto;
I'm currently having issues with some CSS/HTML code.
http://codepen.io/anon/pen/bgHGn
I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.
I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?
I'm not sure if that makes any sense or is even possible.
Thanks!
you want to set the text-alignment property to center
.largeheader{
position: fixed;
margin: 0 auto;
font-size: 100px;
z-index:2;
text-align: center;
top: 50%;
left: 50%;
}
The core issue being this isn't exactly in the center of the page,so as #RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.
See the CSS code for the solution:
http://codepen.io/anon/pen/GqeBa
.largeheader {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
margin: -50px 0 0 -112px;
font-size: 100px;
z-index: 2;
}
Fixed positioning allows the element to stay put while you scroll the page.
To get the large header horizontally centered you can use text-align: center; as #metsales suggested.
In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.
You'll end up with something like this:
.largeheader {
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 0px;
}
To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.
I have a navigation menu in one div and there's a background image in other div which is set to absolute because it has to be in some a bit different position of the website. Now that image is transparent PNG and it blocks clicking the last link in the navigation because that image is technically on top of that link (visually not).
So I set z-index: 1 to menu and that fixed the problem only on Firefox, the link becomes clickable. It doesn't work on Chrome, Opera and IE though.
What could be the problem?
There's a screenshot, as you can see that girl image is transparent and when selected it shows that it technically is over that Contact us link and it somehow blocks it:
http://i.stack.imgur.com/O4rEV.jpg
The menu and the image are not in the same parent div.
#the-menu {
margin: 17px 0 0 17px;
z-index: 1;
}
#the-img {
background: url("../images/img-girl.png") no-repeat scroll center 0 transparent;
height: 351px;
position: absolute;
right: 50px;
top: -52px;
width: 381px;
z-index: 0;
}
#the-menu should have relative position in order for the z-index to work.
I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
I have simple login box, which is centered to the middle of page (vertical and horizontaly).
Here you can find DEMO for it:
http://encodable.com/uploaddemo/files/login.html
Problem is that everytime I resize browser window manually the content of div (#login-logout-box) is being resized, if someone is trying to view this login form in browser window, which height is lower then 380px, it should add scrollbars to the page. But atm instead of that box is just cutten off. Means that under low resolution this form is partically shown without ability to scroll :S (tryed several phones - Iphone and Android 2.3)
But again I don't want that div to be scrollable but whole page.
I've checked www and stackoverflow for possible answer, but nothing at all, also I'm sorry if question is unclear, I've tryed my best to describe it.
Your code should not be working in any browser at all. As per the W3C Spec, "Boxes with fixed position that are larger than the page area are clipped."
Simply change position: fixed; to position: absolute;
#login-loguout-box {
width: 380px;
height: 380px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -190px;
margin-top: -190px;
margin-bottom: 20px;
border: 2px solid #cacaca;
}
Working Code
Full Screen Demo
Use the overflow setting in css, e.g.
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */