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
Related
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;
}
}
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.
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. …
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
i have a website in which i am trying to position (using CSS) a certain on the page. the is absolutely positioned and is located inside a relatively positioned paernt .
on firefox and even IE it looks ok but on Safari, things get messy and it shows 5 pixels lower than it should. i have tried to figure out for days now what is wrong there but cannot seem to see it.
you can find an example link to the problematic page here:
http://yaronattar.com/index.php?option=com_content&view=article&id=117:the-new-lovers-2010&catid=51:the-new-lovers-2010&Itemid=242
the problematic is the one conaining the "previous/next" navigation at the bottom right corner of the page.
anyone sees what is causing the trouble here?
thanks
This will target webkit browsers only (Chrome, Safari and I think a version of Opera too)
#media screen and (-webkit-min-device-pixel-ratio:0) {
/Chrome and Safari CSS here/
#id-name {
position:absolute;
width:100px;
height:100px;
left:100px;
bottom:100px;
}
}