I have a very odd occasion on my website css. I am using bootstrap columns to align my modules in the rows but in some iphone modules (iphone 6-7-11), the display property behaves differently than other iphone models. My website is https://mgcosmetics.gr/el/. My problem is with the cart button at the main menu on the mobile version. I want it to be as the first image. Tell me if you need whole css files because they are big! Thank you in advance for your time!
Correct way of presenting (chrome dev tools desktop, mobile view) :
Iphone 6 browserstack simulator dev tools:
After hours on that problem i found the solution. I'll post it here in case someone face the same occurrence. Also I haven't found a solution to this anywhere else. The problem was in css
display: table;
which for some very strange reason behaves differently in some iphone devices regardless of the ios version! I changed
display: table; to display: block; and now all the devices show the same thing.
Related
My site is live at http://brand2o.com/. The site is responsive, and works fine at any size on every desktop browser I try and on my Android phone, but the problem is that on an iPad, the right side of the header gets cut off so it says "Licensing P" instead of "Licensing Portal."
I'm having trouble figuring out where the problem lies because I can't replicate it on desktop — Chrome's device mode actually shows it having too MUCH room on the right and the website not centering instead!
Any ideas?
Edit: Looking more closely, it looks like the iPad is giving each navigation item (they're flexbox children) equal width, and messing with flex-basis and flex-grow don't make any difference. I can't find anything about it but is this any kind of known bug? Again, it looks fine everywhere else, including desktop Safari.
Some of this issues are related to version of the OS and Safari also. What I do on this instances, if you connect your iPad to your MAC you will be able to inspect the HTML and CSS and figure the issue out.
Debug apple devices
Another site
Hope this help!
Regards
Figured it out: The lis were set to width: 100%; for when the navigation collapses, and I should have overwritten it in the media query for bigger screens. I added width: auto; and it's fixed!
Link in question: http://goo.gl/w5Vxu7
If you open this link on desktop computer, the vertical aligns are good.
However, on my cellphone, it is not:
This screenshot is taken from chrome://inspect with my Nexus 6 connected, it is exactly same with the appearance on my phone. You can see the first line is obviously dispositioned.
The small icons are Material Icons, related HTML and CSS are:
<div><i class="material-icons">today</i>2012-12-25</div>
<style>
html{font-size:15px;font-family:Microsoft Yahei}
div{font-size:1rem;line-height:1.5}
i.material-icons{line-height:1.4;vertical-align:bottom;font-size:inherit !important}
About that vertical-align:bottom, it looks a little weird not using vertical-align:middle, but I've always had vertical align issues with material icons, especially when accompanied with Chinese characters, which don't have baselines, and I've tried numerous different combinations of line-height,font-size,vertical-align,font-family for both the div and i.material-icons and decided this combination as shown above is the best.
I am quite obsessed with this issue and poured in lots of efforts trying to solve it. Until later I found out this only happens on my Nexus 6. On iPhones and other android phones there is no such problem. Even on my Nexus 6, if I use other browser instead of Chrome, there will be no problem; and even with Chrome, landscape view has no problem, the disposition only happens on portrait view of chrome on Nexus 6. I have only tested so far, but this still could be a potential problem for some mobile devices in some special environment, so it is still not an issue I can simply ignore. And this is where I can use some of this community's knowledge and experience - what could possibly be causing this behavioral discrepancy?
Vertical align MDI (MaterialDesignIcons)
The provided link currently returns a white screen, so I can't test your CSS.
The problem with the material-icons shouldn't be solved with a strange combination between height, line-height, padding and so on; explore new attributes. In my case, the following CSS solved the problem.
.material-icons{
display: inline-flex;
vertical-align: baseline; /* or middle? */
}
If the code above doesn't work, try different display properties.
Worth a try
My first thought was your use of rem, "older" browsers doesn't support it (can I use). It is still strange that it works in landscape, but try to define all measurements in a safe unit.
Another (problem)
If you want to support older browsers, you shouldn't write the icons in English, IE9 and below won't support it. Use the alternative solution instead (example below).
<i class="material-icons">today</i> /* do not use */
<i class="material-icons"></i> /* do use */
If you click on the icons and select "<> Icon font", you will be able to copy the html for older browsers.
If the information above don't help you, please fix the link (and tell me) and I will check if I can recreate the problem.
I am using prestashop 1.6 with a custom theme. I have done some little changes here and there on the theme mostly just color and font on the css file. The mobile menu works perfectly on all android that I've tested but for some reasons, it does not work properly on some Apple devices. On an ipad 2 IOS 7.1.2, the menu background shows but the content does not. On an iphone 4 IOS 5.0.1, some of the content show, some don't. But then, it work great on an iphone 4 IOS 7.1.2.
I have no idea how to fix such problem as I have no clue what is going on. Has any one experience this problem or know the reason. Please help me out.
Here is the link to the site: www.halivu.com (it's not fully done, I have not finished with the content :D).
Thank you.
try to emulate the devices in Google Chrome.
All menu div tags are empty. Check your mobile settings in prestashop backend.
I'm testing a page on mobile devices and I noticed that three specific links are not working (they are not "clickable") on some iPhones/iPads. My client spotted this on his iPhone and iPad, and so far I have only been able to replicate it on a test iPhone 4 with iOs 6.1.3.
The page is xxxxx and the three links that do not work are the < X > navigation at the top of the page.
I've tried checking for overlapping divs. Couldn't spot that as the issue. If it is a Safari/iOs issue that I can't fix through some code, that'd be helpful to know too. I appreciate the help.
This three elements are not selectable by touch because there's no real content inside of them. Set them as display: block; so they become block elements.
#arrowleftsmall a,
#arrowrightsmall a,
#thex2 a {
display: block;
}
I'm not an expert in css and I am building my first ever responsive WP Theme. It seems I got it working on chrome and FF (at least it looks ok on my mac), but in Safari it seems that width 100% does not work when resizing browser window (the same on iPhone and android phone). The site is http://www.designstest.co.uk/ stylesheet: http://www.designstest.co.uk/style.css
Thank you for reading. Any help will be appreciated.
Hey, as I checked your code, I found a lot of issues.
I strongly advise you to hire a designer to build your website with a responsive layout.
If you don't want to hire a designer, there are a lot of free responsive layout frameworks available for you to use.
also, you have a visible horizontal scrollbar in your website, if you wish to remove it simply add this to your CSS.
*
{
margin: 0;
padding: 0;
}
This is what I see when using FireFox on Windows 8