I am having trouble with image resizing in tables in my current website project.
While basically all images in the page content are getting resized to the containers width (caused by the Twitter Bootstrap framework I am using for layout) I found out that for images in tables it does only work in Chrome. With other browser engines, resizing is ignored (only) for tables. I thought using max-width: 100% for resizing is working in all cases.
Before you ask me, for certain pages use of html tables is intended, because people without knowledge of html should also be able to easily edit the page (so I need them, sorry).
The url of the page is: http://kunden.tommy-computer.at/fsv_noetsch/?page_id=35
A stripped-down version of the problem can be seen in this fiddle.
This is what the page should look like for small browser resolutions (correct behaviour, but works in Chrome only):
This is what it looks like in other browsers (image is not resized, table columns do not have 50% width, wrong at all):
I can`t figure out how to fix this and also do not have a better approach for it. Maybe you can help me out. Thank you !
Add the table-layout: fixed; attribute to your table (tested OK with Firefox).
Related
no mater how mush I trying my web site responsiveness for mobile. but I am unable to do it I don't know what I am doing wrong. help me to learn how to make responsive site.
I tried to make some sites
repository-1: https://github.com/nasershareef/Practice-Frontend-Dev-8
site link-1: https://nasershareef.github.io/Practice-Frontend-Dev-8/
repository-2: https://github.com/nasershareef/Practice-Frontend-Dev-7
site link-2: https://nasershareef.github.io/Practice-Frontend-Dev-7/
I messed with size
grid
flexbox
nothing worked my site was not responsive I don't know what to do
When I'm opening your sites from links in Chrome DevTools and mobile view, sites are looking fine, so where is the problem?
Your first site totally looks fine in my opinion. I opened it and inspected it using DevTools but if you expect something else, then please elaborate.
Talking about the second site, you have used an image and upon reducing the screen size, your image is shrinking in just 1 dimension. It is not maintaining its aspect ratio. For this you can set width: 100% and height: auto. Do let me know if this works.
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
Had spent many hours try to figuring out what makes content wrapper not working.
The site is here:
http://bit.ly/19dWUf
html structure contains header, content and footer.
Its looks good when accessing using firefox, google chrome in dekstop by resizing the window to emulate mobile view.
The problem
When accessing using mobile devices the content section is right aligned, header n footer looks fine.
since it looks good on firefox and usually use firebug to debug,
it's hard to find what makes problem in real mobile device.
i m using Opera Mobile emulator to check the display..
any opinion appreciated. or is there any firebug/similar tools for testing mobile?
Thank you
Your section#content-wrapper gets margin-left and margin-right of 30px upon page load.
Either remove
jQuery('#content-wrapper').css({
'margin-left':'30px',
'margin-right':'30px'
});
from jquery.custom.js (line 332), or change it to
'margin': '0 auto'
I have done about 20 websites which included the Business Catalyst gallery module. This is the first one that I'm having problems with and I don't know why. Please check out: http://topspindenver.businesscatalyst.com/gallery.html.
You will notice that if you make the window smaller, the gallery thumbnails start overflowing the window. In every other website that I've done, the gallery was responsive within the specified skeleton columns, and the thumbnails automatically get smaller, like on this site: http://mountaingardendiva.com/.
Does anyone know why this is happening only on this site? I have already tried specifically targeting the table that the thumbnails sit in and given it a max-width:100%, but it didn't work.
I'm guessing you're using Firefox to view this site and noticing this problem for the first time, because it looks fine in Chrome. It has to do with how Firefox computes the width of a table and the max-width of images within the table. You can solve the problem by applying a max-width to td.photogalleryitem with each media query that changes the page width.
It does work in Chrome, but to make it work in FireFox try setting the css on your images to width:100% instead of max-width:100%
I have a disturbing problem with tables in IE ...
I created a Joomla! Template combined with bootstrap.
The customer created the content of the joomla! website.
You can find my problem here:
(link removed)
When you look at it in Firefox or other browsers you can see that everything is fine.
But when you look at it in Internet Explorer (I hate that browser), you can see, that the tables with the grey background are not shown correctly. They have to much width. Texts are cut off.
I tried a lot things and tested different solutions from the Internet. But I can't find a solution for that.
Your problem is caused by your large image at the bottom (connectivity2_big-photo.jpg). While you've set the height and width on the image, the CSS has the height and width set to 'auto' which is pushing the dimensions to a maximum possible size in IE.
Either use an appropriately sized image or remove width:auto and height:auto from the img declaration and everything works again.
I suspect this has more to do with using XHTML 1.0 Transitional: IE's reverting to 1997, but that's what you're asking for!