We have an issue with our responsive design. We use this style for mobile devices on our responsive theme:
body {
margin-left: 10px;
margin-right: 10px;
overflow-x: hidden;
max-width: 90%;
}
Below you can see a difference between iOS Broswer and Chrome:
It does not make sense to apply margin to your body, as it is the outermost element. Instead your should use a padding.
According to this ancient blog post Body padding and margin, different browsers will handle margin and padding on the body element in different ways. It wouldn't surprise me if this type of difference is still occurring today.
It worked with percentages:
body { margin-left: 5%; margin-right: 5%; overflow-x: hidden; max-width: 90%; margin: 0 auto; }
Related
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
I am having problem with some CSS stuff. Have a look at : http://codepen.io/anon/pen/rxQQpv .
ul {
list-style: none;
}
ul li {
background: #333;
color: #fff;
width: 100px;
float: left;
text-align: center;
}
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
When I open the same in Android Google chrome, it looks like:
Screenshot from my Android Browser
Notice there is a little space between the 2 li blocks. How do I remove that ? And why is it there ?
Add a border of the same color as the background. It will work:
ul li{
border: 1px solid #333;
}
Or you can add the borders only on left and right if you like it better.
ul li{
border-left: 1px solid #333;
border-right: 1px solid #333;
}
I think you must set the li css rule margin:0 and padding:0 to solve your problem.
Try adding display: block to your li element:
ul li {
display: block;
}
Which Android device / version are you testing on? I wasn't able to reproduce the issue.
The best solution I found is to use another div which spans in the background of both of these divs with the same colour. My webapp had more than 20 consecutive such blocks. Hence adding border to them didnt work well. This solution works the best.
I'm developing a website that has custom lightboxes. When the user activates a lightbox, there is a gray translucent div that comes behind the active lightbox. I've noticed on tablets (ios and android) there is about a 10 pixel margin on the right side where a scrollbar would be. I've tried the following CSS and it hasn't removed it:
#media (max-width: 767px) {
#gray_out {
margin-left: -20px;
margin-right: -20px;
}
}
html, body {
margin:0;
padding:0;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
Here is what it looks like on a desktop:
Here is what it looks like on a tablet:
Notice the bright yellow sliver.
The code for the div that provides the graying:
z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;
The top value is generated with jQuery. Any advice would be greatly appreciated.
I can't provide a direct link to the site, and for this situation jsFiddle can't help because of the nature of the issue. Bear with me.
It seems obvious in hindsight, maybe there is a more elegant solution but eventually this is what I came up with:
#media (max-width: 1000px) {
#gray_out {
margin-left: -20px ;
margin-right: -20px;
width: 105%;
}
#home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
margin-left: -15px;
margin-right: -15px;
width: 102%;
}
}
Removing padding/margins wouldn't work, and that 10px sliver was actually interfering with more than the gray div, so I just made everything that much wider on mobile devices. I've tested it on a couple different versions of the iPad and a handful of Android devices on browserstack and it seems to be working well enough.
I've got a problem with the css on android with the chrome browser
what i do in css is:
html{
max-width: 100%;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
body{
background-color: rgba(101,122,151,0.8);
margin: 0px;
width: 100%;
overflow: hidden;
position: relative;
}
header {
width: 100%;
min-width: 100%;
color: yellow;
font-size: 40px;
text-align: left;
}
and in the javascript i outprint the widths of the body and header
alert($('header').width());
alert($('body').width());
it is showing me the body width is 980 and the header width is 340
but I don't understand why. can someone help me?
Thanks
When loading a webpage on a mobile browser, the browser will assume the site is designed for a larger screen and gives a larger viewport than the device so the user can zoom in on the content.
If you want the width of the device, you need to set the viewport size which can be done with:
<meta name="viewport" content="width=device-width, initial-scale=1">
There is more info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics
First, if you set max-width: 100% and then width: 100% means that width will override max-width, so you can remove max-width. Besides what's the point of setting min/max the same as width?
Second, if you set body width 100% then body takes max width of the viewport. So the question is what's the viewport size?
Have you tried to set min-width to 100% on the body?
Any reason you use position on html and body, and not header also?
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.