I am creating a page that does not scroll vertically. Here is the problem page for reference - http://horizonwebtest.zxq.net/knowledgebase/
It has worked well with the exception of 2 things:
When viewing on iPad (possibly other tablets), the footer is pushed up approximately 10 px and the background image shows below the footer.
More importantly, on the above linked page, when I click on a link for an anchor that is inside a div, it scrolls the page up, showing space below the footer and partially cutting off the menu.
Is there something I'm missing?
I was able to fix it by doing the following:
1.) Setting the h6 inside the .footer-left.fltlft div to margin-top: 20px;
2.) Removing the padding-top: 20px from the div itself
3.) Setting margin-bottom:0; on the h5 inside the .footer-right.fltlft div.
As a side note, do your vertical text centering with line height, it works a lot better and will help prevent these kinds of issues.
please set your content box central_container Flexible (percentages) its better for view in any devices then try to set footer as #mash's answer . ;) ( margin-bottom:0; )
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I have one more problem to solve before I can call my first website done, and I would greatly appreicate the help of this community.
You can see my website for yourself at www.dylanbisch.com
The problem I am trying to solve occurs on the homescreen between the class artdesign and tumblr-wrapper.
Basically, the class "artdesign" contains the two circular buttons and the class "tumblr-wrapper" contains the black and white photos on the homescreen.
My problem occurs if you shrink the browers window and then try to scroll left and right. Instead of scrolling left and right across the entire page, only the black and white photos in the "tumblr-wrapper" class scroll left and right.
I am looking for a solution that would stop the tumblr-wrapper from being the only thing to scroll when the brower window is small, and would create full page left right scrolling.
I hope I have explained by problem adequately, but if I need to explain something differently please let me know.
On line 370 of style.css, you have a position:fixed applied to the .artdesign.
Im not sure what the logic was for putting it there exactly, but if you remove it, the page will scroll as you expect.
The fixed position means that div is fixed and will not move (even if you scroll), its mainly used to stick headers and footers to the top and bottom of pages. (Like the twitter bootstrap page [notice the black header menu along the top?.. thats fixed])
So basically:
.artdesign { /* Line 370 of style.css */
float: left;
padding: 200px 0 0 10px;
position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */
width: 579px;
list-style-type: none;
}
You have .artdesign set to "position: fixed" so this will always stay at the same window location. Change this to "position: absolute" and this should solve the problem.
I hope I can explain this properly. I have the home page. It has 4 widget areas on it. Each widget area has something in it (you'll see in the screen shot I'm including). Three widgets just text with crazy CSS going on and have a header w/a box around the header (including text). The 4th widget is irrelevant because it's just an image.
One widget's header has a box, radius, background color and it's left/right justified with the rest of the information inside the widget. Two other widgets - the header is not justified left and right 100% w/the entire widget area.
See the image as it'll make more sense.
here's a direct link to the image for a alrge view: http://postimage.org/image/ofdqc1sa7/
The wdiget section "New customers" - see how it's left/right justified. It stretches the entire width of the whole box. Now see the Existing and Why - how it's not stretched all the way across left and right. How can I get it to stretch all the way across? Iv'e been going over this soooo many times with change this/change that. My Firebug in Firefox is o fire, but I can't seem to get the correct CSS code to make this happen. Driving me crazy.
Any help is appreciated. Thank you in advance for your reply...
Change this style
.cl-content {
margin: 8px;
}
To this
.cl-content {
margin: 0px;
}
However, this will cause some alignment problems with your columns. But, that class is what is causing your problem.
[ Edit ]
If you change the #text-17 and #text-18 widths to 670px, it should resolve your problem.
I would also change #LoginWithAjax to #LoginWithAjax { padding: 5px; }
Initialy I'd say there may be a padding issue. Is there a live link that I can firebug to troubleshoot further?
I am building a photo gallery viewer using javascript and css, but i cant center the elements. I have a back arrow photo, the photo itself, and the next arrow. these 3 photos are one next to each other, and I need to center all three of them.
Any help is appreciated, and also, I am kind of new to css/javascript/html, so dont be so hard on me.
Thank you,
Guy Z.
(you can go to guyzyl.org, enter any gallery and click on a photo to see what I mean, and what I am trying to center)
This style should help:
#viewer {
text-align: center;
white-space: nowrap;
}
Also, use a DOCTYPE.
Just looked at your site. Try adding the CSS below to the styles for your Viewer div
margin: auto;
That 'should' center the div on screen. Assuming there is enough space in the browser window.
You need to give
<div id="viewer"></div>
a fixed width and set it's left and right margins to auto.
The CSS looks like this:
#viewer{
width:500px;
margin-left:auto;
margin-right:auto;
}
To prevent the arrows from wrapping around you need to resize your photos to fit within the width of the viewer minus the width of the arrows and any padding, margins, or borders on them.
Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.