I've been brought in to help deal with a rendering issue with a website. Specifically, a flexbox element goes all wonky when displayed on tablets. Desktop testing has shown that the issue only crops up when the width and height of the page are set to, say, iPad or iPad Pro in chrome dev tools.
has a section called "Our Top Areas Of Practice". In a desktop or mobile view this section works beautifully but at 768x1024 this section is stuck in a column to the right of the viewport. Any ideas on what would make Flexbox go all wonky like this?
Add this css that would center the elements
#media (max-width:768px) {
.fusion-layout-column .fusion-column-content-centered {
display: inline-block;
}
.fusion-layout-column .fusion-column-content-centered .fusion-column-content {
text-align: center;
}
}
Related
I have this old website that needs to kinda work on mobile. The whole thing is built on tables. On mobile I need the columns to take up 100% of the screens width and essentially go on a new line. In chrome, IE, FireFox.. it just works. However on IOS and Safari it will not go on a new line and the rest of the columns just crunch into the corner (looks real bad)
CSS I have tried: td { display: block; width:100%; float: left; }
Anyone know why on safari only it will not go on a new line?
For anyone else stuck with this issue. Safari will override table styles (without notice) unless you add <!DOCTYPE html> to the top of the file
I'm desperately trying to make my site mobile friendly. To complicate things considerably, while I'm familiar with HTML, I'm also a CSS noob.
I wish to force my floating sidebar to stack for smaller resolutions (iPhone, tablets, etc.). If not, I would be willing to hide the darn thing.
I'm positive that I saw info on how to do this, but can't relocate it by searching "sidebar stack on browser resize", "hide sidebar on browser resize" or any variation thereof.
This is a test page I'm using to experiment with.
Use a media query. When the document is smaller than 750px wide:
#media screen and (max-width: 750px) {
aside { display: none; }
article { width: 100%; }
}
You can also find a list of snippets for standard devices here.
If you want mobile friendly UI, you can use Bootstrap's navbar. Here is an example.
First off I would like to start by explaining my issue, it is as follows:
In all browsers except for Safari my website http://www.hamiltonseniorcity.com/dean/location-category/health-wellness/?passedpageid=28&box=1 appears normal and scales down appropriately on this page, in Safari and on my iPad the page distorts and does not scale down to smaller screens properly. Also it appears that the div that holds the left and right content areas expands to full screen. I believe the issue is caused by how Safari is rendering my divs table and table cell properties, I could be wrong. Does anyone have a solution for this issue or any suggestions?
I've tested the page on the iPad and I can reproduce your problem.
The issue is caused by this CSS rule:
.equal-columns > div {
display: table-row;
}
It's overwriting this code:
.equal-columns > div {
display: table-cell;
}
with the help of this the media query addressing the iPad:
#media screen and (max-width: 768px)
I think Safari gets into trouble, as there's no table cell within the table row now. If you fix this and set it to display: table-cell; no matter what resolution, it works again in Safari on the iPad. I guess it will also fix it on the Safari 5.1.7 on PC.
Also note that Safari is no longer developed for PC. 5.1.7 is the latest and last release from May 2012. All the new Webkit stuff from Apple will not be available on PC. Unfortunately. …
My website (http://amosjackson.com) uses css media queries to resize the website so that it fits an iPhone screen. When I view the site (on an iPhone 4), a block of background shows through to the right of the header. The header is width:100% and so should be from edge to edge. I haven't properly coded the css for non-retina iOS (it looks worse on older iDevices) so please don't comment on that.
The Problem is the padding: 10px; in combination with width: 100%; in the #nav element. Drop the padding an it should work.
I realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.