I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
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%.
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
I am having a problem with the positioning of elements on my page.
When I try to open the website on an different computer with an different screen size it gets kind of messy.
That same happens when I resize my window. Certain elements stack in each other. Every element is positioned as absolute.
I greatly appreciate any help!
Without seeing you code, it is kind of hard. But I'll try to guess the answer.
You probably have set some width, define the total width of your elements and set that a minimum width of the body. Then when the viewports size is smaller, scrollbars will appear.
Add this to your CSS:
body {
min-width: 800px;
}
Sharing some code would be good.
To handle different screen size you might have to make your site responsive. A responsive layout uses percentages instead of pixels for defining layout element sizes. If you are creating a new page you could try BootStrap http://getbootstrap.com/. Bootstrap will make your layout look the same across different screen sizes.
I 've created a site using Dreamweaver, and all my images have absolute position with % metrics. it expands proportionally on wider screens, but everytime I try to resize and shrink browser window it just becomes a mess with all the images fallen in one narrow window. How can I rebuild my design so it shrinks in a browser window in a way that when it is too small for an element, it just wouldn't fit. Do I have to use fixed pos-ing or any other type of pos-ing? Whats the usual way web designers do the sites?
P.S. my site contains text and abs. images, as well as fixed image that scrolls with the screen. What should I use to keep it that way but make a decent view in all screen sizes?
Use media queries or place a min-width on either the body or the element in question. For example placing min-width:900px on the body will stop the entire body from re-sizing below 900px width. (Note: That is not the responsive way to do things. Media queries are a much better practice)
I'm attempting to make a 2x2 grid with each cell 300x300px. Each cell has an image, which fades in and out, reloaded using AJAX ( jQuery to be precise) - creating a 4 image gallery over ajax.
All images are simply dumped into a folder, so there is no defined height or width of them.
Is there any way by which I can have the fill the space? eg, a portrait shaped image would resize to height=300, while its width might be smaller... and similarly for a landscape image ( width=300 with smaller height)? I'm trying to eliminate any resizing of the cells, because it is rather horrible to watch.
I"ll leave centering these vertically and horizontally till later.
Thanks for any help!
UPDATE:
I've pastebin'ed the current code
http://pastebin.com/Hz4fJk9p
Use max-height:300px; and max-width:300px;, assuming your image is not smaller than 300px in both dimensions to begin with.
Even if it's not CSS, I've found some interesting libraries for doing image resizing to fit the container:
http://plugins.jquery.com/project/myimgscale
http://code.google.com/p/jquery-imagefit-plugin/