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%
Related
I'm trying to get images on my Hugo site to display full bleed (edge to edge) only on mobile/tablet view. In desktop view, I'd like the images to remain constrained within the parent container. I'm using Tachyons CSS.
I've looked into the solution suggested here but it would require me to re-design the whole site to implement the additional columns and it's not mobile-only.
Another option I considered was removing the padding on the content column in mobile view. This has the intended effect as far as the images are concerned but it also means the text runs to the edge of the screen which makes it hard to read. Not a good solution.
To see an example of what I'm trying to do, please have a look here: https://brianli.com/. You'll notice that as you resize the browser window the images fill the viewport from edge to edge. In desktop view the images only extend to the edge of the container.
I'm grateful for any help or guidance you can provide.
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
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!
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).