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;
}
Related
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;
}
}
My ajax search bar looks central on my mac screen, but on a phone screen, it is way off-center.
Does anyone have a code that can 'float' it center on all screen sizes?
The search bar in question is on www.rebelleforce.com
Thank you
I've tried various different CSS codes that I've found online in other forums - some centralize it on my mobile phone screen, but then I lose the central location on a computer screen.
I see your code to centralize the search bar you use
div[id*='ajaxsearchlite'].wpdreams_asl_container {
width: 62%;
margin: 0px 250px 0px 250px;
}
try to change "margin" value to margin:autio;
paste this code into style.css file in your theme.
div[id*='ajaxsearchlite'].wpdreams_asl_container {
width: 75% !important;
margin: 0 auto !important;
}
This code causes the search box to be centered on all screens.
Add this in your css:
#ajaxsearchlite2 {
margin: 0 auto;
}
and if still not working, use the important statement:
#ajaxsearchlite2 {
margin: 0 auto !important;
}
in the past couple of days I've been trying to stretch a certain section to fill the entire container, and I got it working. Problem is, in mobile/tablet a left-right scroll bar appears and it also messes up the sticky header.
Page that I stretched: https://roi.pub/about-me/
Code I used:
#primary .container {
padding-right: 0px;
padding-left: 0px;}
.layout-content.boxed #primary {
padding: 0px;
}
#media only screen and (min-width: 768px) {
.layout-content.boxed #primary{padding: 0 !important;}
}
And here's what a page looks like prior to stretching: https://roi.pub/elementor-2620/ I'm just trying to get the content to fill the white container without messing things up.
Advice will be appreciated.
You removed padding from the .container class, which is what needs to be there for bootstrap to work like it should.
NOTE Never override bootstrap added classes, if you want to change how bootstrap work, pull in sass/less version and do your stuff there.
On the .row bootstrap use -15px on left and right to accommodate for padding of 15px on left and right of the .container, thus when you remove padding from .container you get mess, don't override bootstrap.
#primary .container {
padding-right: 0px;
padding-left: 0px;
}
.container needs to have padding of 15px, those lines above is what makes your horizontal scrollbar. When I remove them everything work fine.
If you are not bothered with overrding bootstrap (you should) instead of setting padding to zero on the .container you need to set padding to zero on the columns itself. Like this.
.full-width {
padding: 0;
}
You already have that class, on the element that also have .col from bootstrap.
GENERAL COMMENT
If you find yourself in a need to change bootstrap setting you should use sass/less to alter the setting, but if you find yourself in a need to change bootstrap behavior then DON'T use bootstrap.
Your problem has appeared from the 1170px width of the screen (this is the width of your theme too).
so there are two solutions
Remove the -15px from the margin from the max-width media query: 1170px, and also remove the #primary #content #main paddding
#media (max-width: 1170px){
#primary #content #main {
padding-left: 0;
padding-right: 0;
}
#primary #content {
margin-left: 0;
margin-right: 0;
}
}
Either apply this code #primary .container {overflow: hidden;} on the container to hide any overwriting
Im using a template based site, with added css. So I dont have any code to add, other than below. Here is my site im trying to fix.
The code below is what i added to fix the spacing above my homepage gallery, and it messed up the space below the gallery. Im trying to make the top and bottom equal space.
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 34;
padding-top: 0;
You have the CSS #pageWrapper{margin-bottom:30px;} which displays normally at big screen sizes. However, that space is still there when you resize the window.
The solution is to add margin-bottom:0px; into the #media thing:
#media only screen and (max-width: 800px)
#header, #pageWrapper, #footer{
padding: 30px 20px;
margin-bottom:0px;
}
EDIT:
margin-bottom: 0px !important in the #media query should do it.
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;
}