I am working on developing this site and am at a loss for why, when I try to generate a sticky footer for scrolling pages such as the linked one, it will not scroll on a mobile device (tested on an iPhone in Safari and DuckDuckGo). My goal is to add a sticky footer such that the footer is at the bottom of the page always (not at the bottom of the viewport always).
I have tried to change the positioning of the footer using fixed, absolute, or relative. For fixed, it will scroll but the footer stays at the bottom of where the viewport initially was. The latter two both result in being unable to scroll the screen in mobile. However, Chrome Developer Tools using a mobile device (namely an iphone) will produce the desired behavior). I have tried various tutorials including this one on sticky footers.
I currently have my footer formatted as such,
.site-footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: white;
}
With a responsive setting for mobile that modifies a couple parameters,
.site-footer {
position: relative;
margin-bottom: 20px;
}
I realize this is not a full minimum reproducible example but I'm struggling to generate something that is portable enough to share here. Thank you.
Remove this code and you will have sticky ;)
#media only screen and (max-width: 600px)
#media only screen and (min-width: 300px) and (max-width: 767px) {
.site-footer {
position: relative;
margin-bottom: 20px;
}
}
Related
I am having trouble developing a website using Bootstrap. I am currently trying to have a margin on the side, when the screen or viewport is too big. But when I finally got it, it broke the responsiveness of the page.
The whole body is inside this div to create the margins:
div style="width:1300px; margin:auto;"
Add this media query to your CSS and make sure it's referenced after any other CSS:
#media screen and (min-width: 1300px) {
body {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
}
This is only for chrome browser no spirte buttons on others...
I have a site that is supposed to reorganize with landscape and portrait views on a tablet and phone. It looks ok on Desktop and Tablet but when viewed on a phone all the elements overlap. Here's the site: http://cit-blogs.com/R00092575/responsive/index.html
The CSS for the overlapping divs looks like this:
#media (min-width: 480px) and (orientation landscape){
.leftPanel {left: 0%; position: absolute; top: 190%; width: 33%; height: 33%;}
.buttons {left: 45%; position: absolute; top: 190%; width: 40%;}
.rightPanel {left: 67%; position: absolute; top: 190%; width: 33%;
}
And
#media screen and (max-width: 380px){
.buttons {clear: both; left: 15%; position: absolute; top: 80%; width: 40%;}
.leftPanel {clear: both; margin-left:auto; margin-right:auto; top: 90%; width:100%;}
.rightPanel {clear: both; margin-left:auto; margin-right:auto; top: 130%; width:100%;}
}
I tried putting a div around the elements that get overlapped and another one around the divs that overlap but it didn't work. I am new to CSS and not sure what to do, static positioning doesn't seem to put all the divs horizontally across the screen so I don't think I can use that as seen in the Help page on my site.
The actual CSS has one of the panels set to invisible on the phone size. This was to prove that the particular CSS was being seen. Tablet and Desktop Css is getting seen. Can anyone tell me how to fix the CSS for the phone so that the buttons, advert and Twitter feed don't overlap the text and video but also realign to the horizontal and vertical positions as required for landscape and portait views. HERE IS THE FIDDLE http://jsfiddle.net/Sheeno_no_no/dZCjL/
if you are talking about your .buttons being in the middle of the screen, you have a media query in your stylesheet at line 242 that places them 52% from the top of the screen. you probably want to hide the twitter feed at that screen width as well.
if you are using the buttons as a footer, you could fix them to the bottom when in tablet or desktop and then just have the postion:static on the smaller screens so it is the last element on the page when the user scrolls to the bottom.
also you may have a closing ; missing somewhere in your css. I think thats why you see the words TV and Music
Validate your html and css at W3C
Got it sorted. Made a container div .bottomBox {margin-left:auto; margin-right:auto; width:100%;} but the leftPanel and rightPanel to float left and right respectively eg .rightPanel {float: right; width: 30%;} and put the buttons and login box into a list <ul> <li></li> with the buttons CSS to .buttons {margin-left:auto; margin-right:auto; width:10%;} This gives panels on either side with the login and buttons in the middle without any overlapping. For portait mode simply set the panels to the same as the bottomBox.
This issue has been bothering me forever. I'm using the Bootstrap framework and whenever I view my site on mobile devices I get 20px margins on the right and left side of the navbar.
In the past some have suggested the following:
.navbar-fixed-top {
margin-left: -20px;
margin-right: -20px;
}
Unfortunately, this doesn't work. It solves the issue with the navbar margins but creates issues with the rest of the page.
You can view an example of this problem here: http://www.theplaybook.co
Any insights are much appreciated.
It's caused by this line (in bootstrap-responsive.css, line 802):
#media (max-width: 767px) {
.navbar {
padding: 0 20px;
}
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}
I'm seeing some nasty side scroll on mobile devices. I have two #media queries set, tablet and mobile.
dev.bdbshop.com
#media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
Is this the issue? Is there a better way to do this, e.g. use a percentage?
Should I add a third #media query and set more specific percentages? Currently there are only 2 break points that are rather wide.
I have checked your code <div id="sidebar-footer" class="sidebar">
You know What is the exactly width of this element? You have used mentioned its width to more than viewport 100%.
#sidebar-footer {
clear: both;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
overflow-x: visible;
overflow-y: visible;
width: 104.255%;
}
Use 100% instead of 104.255% . It works fine with it.
Follow-up question, do you personally think it's worth it to add another #media screen break point lower then 767px? For instance 320px for older mobile & iPhone?