I am designing my first webpage. I have completed almost all the work but now the problem lies in screen resolution. I start designing on 1920x1080p of screen resolution but when i check it on 1080x768p screen the content was missing and overlapped. Now i set the screen size of my Laptop to 1080x768 and set the webpage but while I turned it back to 1920x1080 on the right side content was missing mean only in the 1080x768p screen while i have used following code.
body {width:100%; hight:100%;}
It just fills the background images to full screen while content does not displays on full screen what to do any help?
you need to add to html and the body
html,body{
height:100%;
}
/**reset padding of body**/
body{padding:0;}
(the width of 100% is auto)
LIVE EXAMPLE
Related
My Website Link.
My problem is,
Latest News section in my website(above footer), is not displayed properly in the mobile view.
The contents are very small, very difficult for the user to read it.
Can anyone suggest me any method or some correction in CSS, so that the contents are clearly visible.
Thank you.
Place this after the camera.css is initialized.
#media screen and (max-width: 480px){
#camera_wrap_448 .camera_caption > div div.camera_caption_desc {
font-size:3em !important;
}
}
Try to use VW instead of PX on both your height and font-size.
I also notice that there is a responsive problem in your "Product Portfolio when on 1199px upto 481px screen viewport.
The problem that I have is this:
www.dondolomemories.it
When resizing the window the image of the logo isn't resizing until the very last moment, resulting in a horrific two row menu overflowed.
I spent almost 2 hours trying tons of different settings. Can someone help me in figuring out what it's wrong. I simply want that resizing the window instead of overflowing the logo will resize to fit the menu on the right in the same line.
Giving your web page, by my inspection, would let the menu items not be showing on default by resizing to page inner width of 1024, I checked the ul.menu_top, discovered that in line 1991 in style.css,
#media only screen and (min-width:769px) and (max-width:1024px) {
....
}
Changing the 1024px value to larger like 1280px seems resolving the overflow-break line issue.
Try giving .logo a percentage width on smaller screens:
#media and screen (max-width:600px) {
.logo {
width:50%;
}
}
That should align correctly below width 600px, of course you can input and width you want and have multiple breakpoints to align it perfectly.
Update: Sorry about not linking the code. I cannot show the actual preview, but I can link the code via JsFiddle. Link on the bottom...
I have a site with bootstrap with the width set to 300px when the screen is on mobile,
#media screen and (max-width:991px)
{
}
Basically what I have is like this:
But, what I want it to be is like this:
How do I do this? I tried to set the container 300px, set the body and html to 300px. But still have some excess content in the sides. How do I fix this???
Link : http://jsfiddle.net/godheaper/hyfueqd5/3/
I am not able to figure out why this is happening, I am working on a fluid layout which is fluid till 1366px screen size and after that it is fixed, except header.
Now if I change my screen size anywhere between 1200px to 1366px then it does not make any change in html elements and instead a horizontal scroll bar appears. If I go beyond 1200px to anywhere till 300px or something it scales very well. But I don't know why is it having issue between 1200 to 1366px screen size.
ISSUE: I don't want horizontal scroll bar to come between 1200px to 1366px and make content scale accordingly, as it scales for other screen size.
And this issue is not on a single page, it is on complete website. You can see this issue happening on this website Winni.in
Any idea, where I am going wrong?
The issue appears because you have this declaration in your CSS
#media (min-width: 1200px)
.container {
width: 1330px;
}
}
Which means that starting from screen width 1200, the div will be 1330px. Just change it to 1200px or 100%, depending what result you want to achieve.
On my website people can post images on a board and drag them around.
At the moment I use the following:
width:60%;
height 40%;
They can save their work.
The position is saved with margins so a image can be top:50px; and left:150px;
So its 50px to the right of the left border of the div and 50px down from the top of the div.
If they load their work it has to look exactly the same.
So if a image was on the lower right corner it has to be on the lower right corner when they load the file.
My problem is that if a user loads it on a different resolution it takes the margins and if the screen resolution is bigger on the next screen the image won't be on the lower right corner because there is more room cause 50% of 1200 is less than 50% of 1900.
So I have to use width and height in px but if i set 600px on the 1200 px it will look good but 600px on the 1900px won't look good.
Is there a way to use px but make it look good on every page?
So basicly i want to use px but it must look the same (like when i use %) so the margins will be the same and the page looks the same no big open spaces on big resolutions.
on the example i made a board in 1366 and reopened it in 1024 the images take the margin from the left so it is out of the original board.
But the board (yellow background) is the same % of the screen.
So i want a board thats the same % of the screen but loads the images the same on every resolution so bottom right corner on 1025 screen must be bottom right corner of 1366 screen.
if i use px only the site looks diffrent on all resolutions and thats what i want t prevent.
What it sounds like you have to do is adaptive theming or responsive design in CSS.
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
For a screen with a max-width of 1024px, set img elements.
You create some of these for each screen size you want to consider and voila, you should be able to have complete fine-grained control over what a user sees regardless of what their screen size is.