I am doing a responsive website that contains a gallery page. Here the gallery page is not responsive for mobile phones less than 5" screen. In these screens the images not fits to the screen. Is there any solution.
Link : http://www.wheelfix.ae/test-2/
You could add a Media query with max-width: 650px.
In the media query set the width to 100% and the height to auto.
I am not Sure if this solves your Problem but i think it is.
Related
on my site I have an iFrame which contains products that I sell.
When viewed on a desktop PC it's fine, but when viewed on a mobile / tablet device the image doesn't resize properly. The image in the iframe is blurred because it has been stretched to fit the screen. If you rotate the device or resize the screen by even a pixel it fixes it.
An example product is here:
Click and view as a mobile device
I have a css attached to the iframe so I can control what happens inside, but I can't figure this one out.
I've applied this to the canvas but it just stretches the image, it doesn't resize it:
height:100% !important;
width:100% !important;
It seems to be getting controlled by some js from the origin server, is there something simple that I'm missing here?
Thanks in advance
Chris
Try using attributes height="100%" width="100%"
I have just started web developing a few months ago and I designed my websites. You can look: WEBSITE
Height of containers on my screen are not same on other computer screens. I know it's due to screen height. But i want my website the look exact as it looks on my screen on other screens. So my question is how to do that. Here a screenshot from my screen:
I noted that when i open my website on some of my friends laptops and computers, the height of containers are different but actually there are not different. Its screen resolution. So, finding a solution for this.
I looked at the code of your site and the containers you have 250px height and 33% width. Your images are set to have 100% width and height and overflow is set to hidden. This means that your images will be stretch and shrink depending on the screen resolution. What you want to have is width: 100% and height: auto on images. And your containers around images shouldn't have overflow: hidden and height: 250px.
I'm using the picture element with srcset so the same image but with different resolution is downloaded based on the device screen size.
It's max-width: 100% on the image's styles so when it downloads it forces the content below to move.
Is there any way to tell the browser to reserve that space using CSS when using srcset?
I'm also interested on a JavaScript answer if it's not possible.
Thanks.
You could set the image height based on the image width. So the only thing you need to know is your cameras aspect ratio. If the images have different proportions, weve got a problem...
ratio=9/16;
window.onload=window.onresize=function(){
Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){
img.height=img.width*ratio;
});
};
RE-EDIT:
I am in the process of making a 1 page site. This is for a school and will only be accessed internally (like a page for different links that staff can quickly use to navigate to).
However sometimes staff have different sized windows open, when they open IE (it will auto re-direct them to my HTML page) is it possible to make sure they open it as 100% width and height?
Thanks,
Nick
Ya you can have width and height to take up 100% space but it is not easy to design a page like that for all resolutions. As you have to exapnd and shrink content both in height and width it becomes complex.better have a fixed width and have height according to the resolution(Again a problem with retina display). Here are some browser statistics- Link.
you are concerned about your page on different resolutions of desktops and laptops. But the bigger problem would be mobiles and tablets as they do count for quite a lot of web-traffic.
Better way of handling the problem is to go with responsive design and target 2560×1600 and above 1366x768 for desktops and few mobile and tablet resolutions.
Here is a link for responsive design resourses- resourses
Liquid design isn't too difficult.
If you mean you want your page to open in a new tab or in the same already maximised tab, search for that; SO has that covered already.
Don't worry about height. Just make it fill the width and let the user scroll.
How to set screen resolution for all screens like desktop, laptop, etc,. in parallax movement.
I am currently working on a parallax website. I have a problem to set the screen resolution for all screens. I want to put several images in the background. The width of every image is 5212px.
You want to set the width of the images as a percentage rather than a width. If you set the width to 100% rather than 5212px for example then no matter how much you zoom in or out and resize the window the image will always be 100% of the window size.