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.
Website in question: s123c.github.io
Recently I started making a one page scrolling website as a side project and used a 'selector' portfolio. I also added a auto-scroll masthead.
I came across the issue of the next title (Side Projects) after the portfolio gallery sticking to the right side. I can't understand what triggered this happening as I can remember it working swell before.
Also #media queries have stopped working which is definitely related as the inline title "Side Projects" moves down as the window gets smaller. I feel as if the #media queries no longer work and the browser is automatically using default scaling.
Any advice appreciated (but please don't advise me to get Framework or Bootstrap. I'm aware of the options).
Not sure how the website is suppose to look but adding display: inline-block; to the id #portfoliolist is pushing that div down below all your thumbnails.
#portfoliolist {
display: inline-block;
}
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 have been hunting around and haven't found a solution that works yet.
Here is my site which does what is needed on a desktop but when it loads in mobile the upper icons are no longer centered but the lower ones are
To supply all the code here would be long so I'm sure someone will knock me for that but to me it seems easy to use the inspector since i'm not sure if css else where could be effecting this.
I will gladly paste all of the code here if really needed.
As you can see on the desktop they are in a row but on a mobile I would like to have them centered and 2 in a row on portrait and all in a line on landscape but still be centered in the screen.
My Site Desktop
My Site in an iPhone 5 view
Within your div .centermiddle you have divs named .view that have the style float: left;
Instead of floating your elements you should set them as display: inline-block; which is the correct way of achieving what you want to do.
Doing so will center those buttons for you.
I am a long time silent member of SO. I have always found the answers I needed up to now, hence my very first post! I cannot seem to find a solution to this issue related to twitter bootstrap.
It's a very simple example of google maps integration with the fixed top navbar layout. Everything works as expected on a desktop browser. Whenever I resize the browser window bootstrap switches to mobile layout and the expand/collapse button shows up. That works well except for the fact that my map container breaks as bootstrap seems to add some padding around the map layer. I am a new member and it won't let me attach screenshots, but I hope you get and idea by checking the site URL below. Simpy shrink the browser window and you'll see what I am talking about.
I have tested it on Android emulator as well with same results.
Site URL
Any help would be appreciated! Thanks in advance.
you need to add this to your css
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
I saw that it was
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}