I have a personal live site at http://brunomoreira.net based on the great Touchfolio theme (http://dimsemenov.com/themes/touchfolio/) for Wordpress.
Since I don't know LESS, I've changed it to use a regular style.css stylesheet.
Everything looks fine except when viewing the "Projects List" (http://brunomoreira.net/projects-list/) section on a iPhone. The masonry blocks appear slightly padded to the right and that makes them not appear 100% visible on the iPhone screen (and it lets me swipe to the right, which shouldn't be possible).
I believe it may be a problem with margins or padding in the CSS or in the masonry code itself, but can't figure it out.
Any help appreciated,
thanks.
Bruno
On the mobile version you should remove the padding from:
#primary { padding: 0!important; }
Related
I also have this issue. I am using Ubuntu and just completed the Hello world tutorial. I wrote some more text and I am unable to scroll. I can see where the words keep going but nothing I have tried lets it scroll. I have not made any HTML/CSS edits. I have only added more text to the <p> tag.
There is some default CSS applied for chrome packaged apps. Putting the following in your CSS should re-enable scrolling:
html {
overflow-y:scroll;
}
Someone is putting together a cool guide which might have some more tips. See https://gist.github.com/maicki/7622137#scrolling
Chrome apps have a default stylesheet applied to them, to help the web "page" be more of an "app" by default.
For Chrome Apps on Mobile, we also include this (well, a nearly identical) default stylesheet.
So that is the reason for that behavior. Scrolling is absolutely useful in very many contexts, and is absolutely supported in any DOM element by adding overflow-y: auto;.
It was simply deemed to be the wrong default for packaged apps which live inside a dedicated window of set bounds and where we encourage not having full page content overflow (very much the opposite of the web). Most apps usually surround a main scrolling element with fixed navigational elements (but not always).
FYI, there is also another open issue for Chrome Apps on Mobile to replicate yet more of the Chrome for Desktop default styles.
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
I have a responsive site design, most of which works just fine.
On the checkout page though I have a Select element for selected a country. Some of the options are very long, the "Congo, the Democratic Republic of the" for example. This pushes the layout out to the right, breaking the layout and making the layout scroll horizontal - which is horrible ;)
If I remove the select completely, the layout displays fine. And if I remove all the options and put short tests ones in their place it also works fine. So I'm pretty sure its the long Option's which is the issue. The Select itself is only 50% wide, so that doesn't run off the screen - its the 'invisible' option elements.
Here is a temp link: http://moymadethis.com/oca/test.html
Works fine on desktop, issue is on iphone mobile (safari, chrome and opera).
Thanks, hope someone can shed some light on a solution for this?
Steve
Normally it suffices to set width on the select element itself (as opposite to setting width on its parent – the inner element will by default overflow if needed), e.g.
select { width: 6em; }
When the menu is opened (when the element is focused), the options will then appear in a width required by their context, but this will appear in a “layer” on top of the page content, so it should not disturb layout.
If problems remain, please post minimal HTML and CSS code to reproduce the problem and identify the platform(s) and browser(s) tested.
I've recently had exactly the same problem on a project i'm working on. I found the solution was to use !important on the select width which in my case was 100%. This allows the solution to work perfectly on mobile and desktop.
try using max-width on select element
eg #myselect {max-width:95%;}
On iPhone with iOS 15.4.1, I also needed to specify overflow-x:
#myselect {
width: 50%;
overflow-x: hidden;
}
Selected option value never overflows outside of <select> boundary box, but browser behaved as if it did overflow - parent element width clearly changed based on option that is currently selected. With above styling, this no longer happens.
The site I am currently working on (roemlunchdinner.nl) looks fine in all major browsers but Safari on the iPhone and the iPad seems to add extra margins or padding around elements on the lower part of the page. I have tried setting the margins and padding to zero on all relevant elements, setting specific widths etc. but to no avail. I cannot reproduce this is any other browser. Anyone here has an idea what is going on here?
I am new here so am not yet allowed to post screenshots. Here are the links to the screenshot I would have liked to post:
Safari Windows screenshot
Safari iPad screenshot
Mobile Safari resizes elements based on its best guess of what's going to be readable for the user.
You can override this behaviour across the entire site by doing this in your CSS:
body { -webkit-text-size-adjust: none; }
or you can target just individual elements.
try using media queries for ipad
#media only screen and (device-width: 768px) {
your css...
}
give different width and see. Hope this helps
add css to element or related class: padding:0 #important!;
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.