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.
Related
Let's say my background is an image of a boombox such as: https://ibb.co/hCZSWt2
I have the background image style set to background-size: cover so it will resize properly with the window.
How do I "attach" a button to a part of that background, so that if the window is resized, the button will always remain in the same place, in relation to the background image.
(i.e. if they hit a button on one of the cassette decks, I can make a song play).
Currently, when I use position: absolute I can get it to be placed properly for my screen size, but when I use Chrome's inspector to see the mobile view, that throws off the location of the button in relation to the background. I anticipate this will need to use JavaScript's vh and vw properties to calculate where the button should go on window resize, but if anyone could provide a simple example that would help a ton!
Try using top/left/right/bottom attribute. You can set them to percentages so they should shift with the page resizing. If the discrepancy is too much however, you can use #media to change the css once you reach a certain window size. An example:
#yourbutton{
position: absolute;
top: 15%;/*meaning it's top edge will be 15% of the page height away
from the top edge of the page*/
left: 20%;
/*You may want to set height and width to percentages as well to
make the buttons smaller should the screen size be too small*/
}
/*If the discrepancy piles up too much when the width/height is x
pixels*/
#media (max-width: 900px) {
left: 10%/*or something*/;
}
If the answer worked for you, please consider accepting it!
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.
THe thing is we need iframe, so the partner can just add url and we can control what is displayed in it without needing to have their website code.
If not iframe, it looks ok.
But with iframe it is a problem - window height is always bigger than width. And various methods just thinks that its portrait. As I understood the heihgth is how much content there is and iframe does not have scrolls. So iframe for my code is like browser window, not parent real browser window.
There have been various questions, but I still not able to find working solution.
Update:
I found how to make it not go over in height - on window load, take window height and set that height to the div and overflow: scroll. So whole window does not get more high and so iframe does not get so high. On load window height is the initial iframe height. Still not managed yet to detect orientation correctly, because now for some reason when portrait - width is still higher than height, with is 960, at least that what javascript see, but in reality it is not going over boundaries, which are 768px.
Now tried to find out who make it have 960px. And went to this:
function test2() {
?>
<iframe src="" width="100%" height="100%"></iframe>
<?php
}
this is empty content with 100% width, and why it is 960px? Not only for ipad, but using chrome emulation, I see its for other popular mobile devices also.
So if height is lets say 500, and widht is 960, it thinks that its landscappe. But in real ipad does not have 960px width, it has 768. And does not go wider even when javascript detects 960. How can this be?
Update:
To detect widht I use:
$(window).load(function(){
var width = $(this).width();
});
and it gets wider screen width. Maybe iframe is wider and has horizontal scroll, but iPad does not draw a scroll but it is possible to move it horizontally while parent page stays same position.
But just checked with test page iframe - iPad does not let scroll horizontally and page fits in the iframe but still it detects window width 964px, while it should be 768
ALso in the testing page, iframe is in the div, div has style width: 768px !important;
and iframe also has style width: 768px !important;
and still iPad shows width 964 :)
Update:
Currently solved on partner page in hacky way: intially one of the inside divs I make css width: 300px, and then so I get good window widht. Then since I want wide 85%, I multiply widow width * 0.85 and set it to that div which I want to be wider. Earlier I tried to achieve the same with css widht: 85% which caused to become wider than screen. Still this does not make sense, but works.
Use this css on parent container:
height: 500px !important;
width: 900px !important;
overflow: auto !important;
-webkit-overflow-scrolling:touch !important;
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.
I need to have my site fit exactly to the user's browser, this means any browser and any size of monitor. i need to have no scroll bars both vertical and horizontal
I want to do this in javascript/jquery
I have this code:
screen.width
screen.height
i also tried jquery :
$(window).height()
$(window).width()
also had scroll bars.
Is this the only way?? cuz when i used it on my site, i had scroll bars both vertical and horizontal. it was to big.
Can any one please help?
It's impossible.
No way you'd be able to fit your content to all display resolutions (think ipads, smartphones [each with different resolutions], 30" monitors, etc).
by the way:
// both of these on their own do nothing.
$(window).height() // just returns to you the viewport height
$(window).width() // just returns to you the viewport width
body {height: 100%; width: 100%;}
div#page_container {height: 100%; width: 100%;}
No need for JS/jQuery, just wrap all your content inside <div id="page_container"></div>
It also resizes with people resizing browser windows.
I have to agree with Phil. There is going to be no way to determain the resolution of the users screen. That is going to be a user problem. I have always built my web sites at 1024 x 768 resolution for that reason. Sometime even lower depending on the content, and the target audience(sites that target older people who probably have a low resolution setting so they can read their screen).This way, I know that my stuff will fit. Most people now a days, with monitors the size that they are, do not go much below that.
I found this code here at http://support.microsoft.com/kb/287171 that might help you though. This will adjust the screens height and width based on the users screen resolution.
Also remember that some JavaScript will not work in certain browsers. I have run into this problem with pop-ups when it came to changing screen size, scrollbars ect...