So I've received this project to improve a webpage and it has a weird behaviour. When the resolution is smaller than 900px (small laptops and tablets) and you get to the end of the page you can scroll down endlessly after the footer image (it appears the background image repeating itself). This also happens with all resolutions when I have firebug opened. All divs are properly closed. I really don't know what is behind this behaviour. Maybe someone saw it before...
Here's my footer:
<footer>
<div id="footer">
<div id="footerContainer">
<div id="footerMain">
<div id="legal"></div>
<div id="footerNav">
<img src="images/table-footer.png" alt="">
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
The #toTop anchor is being pushed down below the bottom of the viewport when the screen height is below a certain number. This is because whatever script is being used changes the top value of that anchor to be x amount more than the scrolled position. A better way to accomplish this same effect would be to make the bottom value of the guy be something like 10 more than the bottom of the viewport. Then he won't go down too far and cause the browser to think there's more space than there is.
Related
I am trying to set my position statically to the right side of the screen as thats where the logo I am trying to keep is. On different monitors it will flow of the screen.... Is there a way to set this statically, this is what I have right now for my slide... (using a parallax theme so I cannot force the position throughout the page, just the slide.)
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2018/08/ITData_HomePage2018_01.jpg);">
<div class="slide-body">
<div class="container">
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title">Let us help you develop an IT Optimization Strategy and Define your technological priorities</h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=a588c51b-d8d4-4089-90c1-df8e14656af2&customize_autosaved=on&customize_messenger_channel=preview-2" target="_self">Learn how we can help you succeed</a>
</div>
<div class="slide-image">
</div>
</div>
</div>
</div>
This is what I've tried in CSS so far along with fixed positions (broke the page)
#slide-6996 {
width: 100%;}
Is there a way to keep the width at 100% and lock the image to the right of the slide and still be able to scroll past using CSS?
Assuming you are referring to the logo shown in the main image that is added as a background image then all you need to do is add the following:
#slide-6996 {
background-position: right;
}
This will keep the background aligned to the right so that the logo remains on the page however it will eventually slide under your text at smaller layouts. Perhaps you should use a media query to switch the alignment back to left at that point.
Another unfortunate side effect is due to the fact you have a whitebar on that side of your image you are going to be stuck with that unless you use an image without that. To save you the trouble ive edited it out myself and uploaded the image here: https://ibb.co/12dNQdn
So what I am trying to do is reproduce this effect (which can be seen using chrome Version 45.0.2454.101 m). The important thing to notice is that each div is displaying a piece of the overall background image in the wrapper (except it is actually a separate image of the same size that is modified by inverting the colors so you can see the difference).
Basically it appears as though each content div is using a background image that is the size of the document itself.
Structure:
<div class="wrapper">
<div class="content">
Here is some content
</div>
<div class="content">
Here is some more content
</div>
<div class="content">
So much content
</div>
</div>
However, if you were to go visit this link on your mobile device you'll notice that now each div is using its own background image and not overlaying with the wrapper's background image. The background image is now the same size of the content div and is positioned per content div. Why is this happening and how can I get the mobile website to look like the one experienced in a desktop browser? (I am also using chrome on mobile)
Link to JS Fiddle
Kudos for the effort, but this is simply not going to work as it depends on background-attachment:fixed. Mobile browsers try to actively improve the view experience by 'intelligently' handling certain page content differently, especially when it seems desktop-optimized.
One of the things they choose to do is ignore things like background-attachment:fixed, because usually it breaks more than it enhances on not-so-intelligently designed pages on a miniature screen.
So I'm sorry but http://caniuse.com/#feat=background-attachment is your problem here, and it's not going away soon :)
I am working on a fixed width page using bootstrap and I noticed when testing it on iPhone the full width header and footer background were clipped to 70% of the width.
It's Business marketing type site, frequented by people looking for a supplier, normally from their office PC so the responsive aspect was not a requirement but I digress.
Back to the problem
Viewing on a full size screen it looks as it should but if you scroll smaller than the limits of the container class (940px in this case) and then scroll back a little you can see the background has trimmed.
I have been tinkering with it for a while to the point where I have stripped everything out and just put in a simple bunch of nested divs to test and make sure the issue is not some rouge tag but it still does exactly the same thing.
I think the issue is related to items that are not wrapped in the class of container but if I need a full width panel and 940px fixed content I am not sure how I am going to achieve it with bootstrap.
// This Fails
<body>
<header class="fullwidth">
<div class="container">
<p>The content</p>
</div>
</div>
</body>
// This is fine but not full width
<body>
<header class="container">
<p>The content</p>
</header>
</body>
I have not adulterated bootstrap if I remove it or my styles together and restyle the body manually it goes away. But it seems to be a cumulative issue...
Anyone come across this before?
I don't really want to have to strip bootstrap out if possible.
As requested I have appended the link:
http://jsfiddle.net/NcZFz/3/
If you notice in jsfiddle whatever size your viewport is the header will fill it, but the view port only. And if you are using a MAc and have a magic mouse (or whatever) you can scroll right in that view port to see white. But this is supposed to be edge to edge so there should be no white.
It appears you have a margin on the <ul id="menu-primary-navigation">
#menu-primary-navigation { margin-left: 0; }
And you should also put .clearfix on the same element (because children are floating)
<ul id="menu-primary-navigation" class="clearfix">
Check this working jsfiddle.
All the above fixes could be avoided if you used the .navbar .nav classes (and associates) : read the doc.
I'm fairly new to web development, but I just realized something when designing some new headers/footers. When you wrap them in a container with a background image/color that stretches across the page, then shrink the window of the webpage to be smaller than the intended width, and then scroll across to view the content that you can't see in your smaller window, the background image container is no longer large enough (as it resizes to the width of the window automatically, even though the content in it overflows), and you see whitespace instead of the background image.
Take the homepage at http://www.stumbleupon.com for example. Shrink the window, then scroll to the right. All of a sudden ALL of their background images are gone. Header, body, everything. Just content on top of the flat, default color.
Is there a solution to this? Is this just ignored in web design as an irrelevant concern? It seems fairly relevant to me, especially when doing things like viewing multiple tabs/windows at one time, or if someone is (god forbid) using a monitor with a resolution width smaller than 1024.
StumbleUpon have just been careless with container divs. They've set a container div with a width of 100% and then the header div inside that is set to 100% of that.
<div id="container" style="width:100%">
<div id="header" style="width:100%">
Header Content
</div>
</div>
The container div stretches to the visible window width. The sub-div then only stretches to that divs width. If you put the header outside of the container div it will stretch to the full width of the page.
<div id="header" style="width:100%">
Header Content
</div>
<div id="container" style="width:100%">
</div>
See my homepage: http://smallhadroncollider.com for an example of full width headers.
(When loading) For some reason the content of my page shifts down really far while the background is stationary and then jumps back up to the appropriate placement. Anyone know why or how to fix this issue? I would really appreciate some help. Thanks!
Sounds to me like your background isn't really a background, but rather a layer with an image in it that you've stacked behind your content.
I generally find this to be a pain because if for some reason the z-index of the items get's confused (and it sounds like this is what's happening here), weird things will happen when the page loads.
I personally recommend you set the background image on the same block that all your content goes on. Consider the following
<div id="content">
<div class="header"> </div>
<div class="navigation"> <!-- Menu goes here --> </div>
<div class="main"> <!-- Main content goes here --> </div>
</div>
#content { background: transparent url("Images/mybackground.png"); }
This will set the background on the page element that also houses your content. Assuming I've identified the problem corrently, this should solve your problem.
HTH