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
Related
this is my first post here. I am beginning my journey with css and html. I'm struggling with putting two responsive images next two each other that would act as buttons. What I am trying to get at is that all content is displayed on single page (without scrolling) and that the no matter the size of the screen it is always filled. Then with portrait mode on mobile screens it would display after each other.
This is how far I got already: http://test.fulfeal.co.uk/shop-intro/
I can't figure out whether it is to do with image size (the actual image is going to be a picture) or maybe with corresponding div sizes.
Thank you in advance for any help!
In order for the images to take up the full page height, first make sure that you have the following:
html, body {
height: 100%;
}
This will make sure your content can actually take up the full height of the page. Then, your images should also have their height set to 100%.
For the images to show up on top of each other for mobile, you'll need to use css media queries and then set the images to display: block; width: 100%.
In my website I have a row containing 3 images - http://icestartup.com/testsites/site248gfj/. You will be able to see it if you click on the main menu item called "ruimtes".
The 3 images are not having the same height. If i change my screen size the height keeps varying as well. I would like the 3 images to be of same height so that it looks aligned.
PS: I tried to use the CSS: height: 275px; but the image gets stretched! I don't like that. What i wanted was the image to be of same height without changing aspect ratio.
I am stuck with this CSS for an hour. Any idea folks?
Try max-height: 242px; This will work.!
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.
the slider is located here bxslider location
The slide picture has 652px. This means that i should be able to fit in 4 thumbnail pictures in a row under it each with 163px, somehow the 4 thumbnail picture add up to 653px. Why?
The problem begins with this container:
<div class="small-12 large-8 columns no-padding-left" role="slider">
Who has the width set to 66.66667% ... That % acordding with the Google developer tools is 651.656px then you can't take this value as 652px.
What you can do is set the width to the a tag:
.bx-pager a{
width:25%;
}
And for the img :
#bx-pager img {
width:100%;
}
The width of the parent div is actually 651.656px x 214px. So the large slide picture is 652px, which is just slightly larger than the actual size.
The 4 smaller pictures will add up to be 652px and thus move the 4th one to the next row.
If you wanted the 4 thumbnail pictures to be on the same row, then you shouldn't use width: 66.66667% under class .large-8. Also, by changing the horizontal size of the browser, it will move your image slider to the next line and cause your sidebar to stretch. Having something like:
#sidebar {
max-width: 333px;
}
could prevent that as well as allow it to change widths if the screen gets to a certain point.
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.