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.
Related
I use Foundation 6 and have some images in two column groups.
When i resize the browser viewport from 1200px width to 1024px width the big image gets smaller, the width shrinks see pictures below.
Is there a way to permit that?
I would prefer a constant distance between the big image and the small image, to set a fix "B" value (second image) that is independent of the user's viewport.
See full webpage can be seen on https://fadendaten.herokuapp.com/t/categories/clothing
Its because your class .product-teaser-column has fixed width. Change that and it will be responsive again.
.product-teaser-column {
width: 470px;
}
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.
I am building a website for our studio and i came to a problem. That when i view the website on the mobile device i get a very strange gap on the right.
The website is here: www.rawstudio.ee
And print screen. - http://rawstudio.ee/img/ptscren.PNG
Second issue that i have is that when people who have wide but not high screens with aspect ratio for example 21:9 come on the website the logo goes very down and is not on the centre of there screen. The logo does not move in relation with the aspect ratio and is displayed to low. How can i fix it?
This is due to your media queries not catching the logo when it reaches a certain size.
You just need to make a slight amendment in the css for the logo once the page reaches 370px or less and also to its container.
#logo {
width: 100%;
}
#media (max-width:370px) {
#logo img {
max-width: 100%;
}
}
the strange gap is caused by the logo image, it's too large.
I suggest responsively resizing it with #media.
You can debug for mobile devices using google chrome's Device Mode
Image
As for the second part of your question, if you increase the margin-top to 50% of the #logo img tag, again with (multiple stacked) media queries, you'd probably get the result you want, but I don't think it's the correct way to do it.
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
I was wondering of some one can give me a hand on a little thing. I working on a personal project and can't get one thing of it correct.
Here is the JSBin http://jsbin.com/inixuf/1/edit
The problem is in images, if the screen is smaller then 21" and say is 15.3" it will only show 3 images per row while on 21" it will show 4 images per row and as you get bigger it will show more and more. This is not what I wan't I want a script that can force re-size the image div class in order to assure that no matter what's you're screen you will always be getting 4 images per row.
Any suggestions?
use % to set the widths.
So an image is width:20% of div width, with a margin of 2.5% on each side of the image. That way you fill up the 100% nicely.
.imagecontainer {
width: 20%;
margin-left:2.5%;
margin-right:2.5%;
}
and then have all sizes be relative