Working on http://thecraftedgarden.net. It has a bootstrap fixed navbar set up.
For some reason the mobile button is off the screen, the navbar is too wide on mobile devices. In order to duplicate the issue you must use a phone android or iPhone or you can use device mode within chrome. It does not occur in chrome if you just size the window down. Its as if the code for the mobile menu is outside all the divs and body if you take a look with developer tools.
I am almost certain the issue is caused by the bootstrap.css style sheet.
Here are some troubleshooting steps I have taken.
I replaced the entire block of code with the code from getbootstrap.com's fixed navbar example http://getbootstrap.com/examples/navbar-fixed-top/, and the issue still occured.
I have a second style sheet additions.css, and I removed all the styles applied to the navbar and logo and the issue still occurs.
If someone could help me identify what I messed up within the stylesheet or help me decide which lines to replace that would be very helpful.
ina a tag <img src="http://thecraftedgarden.tlchatt.com/img/The-Crafted-Garden-Logo.png" class="logo img-responsive">
try to remove
.pull-left {
float: left !important;
}
and set:
.logo {
margin:0;
}
Related
I have build a landing page using tailwindcss and glider.js for simple slider but after I finished the website I was struck with issue on responsive design part were I was sure that problem didn't occur when before and that is I have an extra space to right all most in all devices when I use chrome inspector device toolbar only on chrome works proberly on mozilla but only this website has this issue on chrome.
I have checked for any elements that may be the cause but without any luck.
as you can see my html element width is 1536 just like in dimension but the extra white space is accually more then 1536.
The div class 2xl:max-w-[1535px] is probably causing the content not to stretch any further. Try changing this value in the css file and see if that helps.
In your main.css file:
#media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
In your index.html try to comment out the "container" class of the second div element in the body to see if this is causing the width limitation.
So the problem is that I was using transform translate for animations I have set overflow-hidden to body but didn't work.
The way I solve it was just apply overflow:hidden for the parent of all elements with animations.
There is a white space on the right side of every page on my website. This white space only appears when the screen width is smaller than 767 pixels so it must be one of the media queries causing it but I can't find the cause. I tried changing widths and overflows on the body element aswell as the #top element, .header element and #menu element. I suspect one of those to cause the problem but I'm puzzled. Strangely this only happens on Safari on my desktop, but on my mobile phone it also happens on Chrome.
See this website on a smaller screen width.
Does anyone have any useful insights?
Please add Css
#media (max-width: 767px){
html {overflow-x: hidden;}
}
Please check the image u are using a "row" there remove that. That was there is a horizontal scroll showing
IT because you didn't follow bootstrap framework...When ever you use
row you must use col after that like <div class="row"></div
class="col-sm-12">
In above case you use row in header but after that you didnt use col add col div after row OR use
.header {
overflow: hidden;
}
thank you for your support. I have created one litte bootstrap page.
I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).
i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.
sample image
do you have any ideas to solve this problem?
The reason why you are experiencing this is because twitter bootstrap utilizes media queries. A media query essentially allows for a css class or id to have differing stylings for different screen widths.
To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap.
Example
So here is a div with container fluid
<div class="container-fluid example">
// your div content
</div>
Here is your css that will override the padding left.
.example {
padding-left: 0px;
}
I am designing a website but when I view it on mobile view the carousel doesn't show with 100% width and also the nav off sets a bit.
Heres a picture.
http://oi45.tinypic.com/30dbh91.jpg
My code is pretty much the base Bootstrap CSS and I can't figure how to fix the mobile view so it will show properly with .collapse.
The problem is not with the carousel, but with the navbar, it's too wide.
I could not figure this out until I saw the website URL in the lower left corner. You really should have attached some relevant CSS to your question and maybe a link to the site. Providing an image as a reference is not enough in most cases.
Add this in your CSS: (on line 45, which you left empty)
.navbar-wrapper .navbar {
width: 100%;
}
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.