I have a bootstrap model inside a div. I want to show a sign up form in that model. I don't want to extend the page beyond the viewport of the browser whether the browser is opened in a 15+ inch screen or a 13+ inch screen. In short I want to show the model to all the users on any screen size so that the they don't have to scroll the page to get the full content of the sign up form.
Try giving the div a max-width.
Related
I was wondering how to keep the size of an element (f.ex a cube) on all devices. And when you resize the browser window the element will keep the same "form", but become smaller. What i mean is so when you resize the browser window horizontally, the element (f.ex cube) will keep the same "form". So it wont be more wide than tall.
I know i got to use percentage and not px on the with and height. But when i do that, the element will of course still be the percentage of the current device or screen. I am very bad at describing, so i'm going to give an example instead: When i made a calculator with HTML and CSS on school it fitted the screen perfectly. But the screen on the school is squared (same width as height). And the screen at home is rectangled (not the same width as height). So the calculator at home is to wide. You understand now? If you didn't please let me know.
Here's a picture of how it looks like on my screen home: Full sized browser window home Resized smaller in width window: Smaller in width browser window at home
And sorry for bad describing.. And english.
I dont know if I get what you mean, but if you do mean "keep aspect ratio" you should try this.
Wrap your element in another container, use padding bottom on the container and make your element occupy all its space.
On some mobile devices such as iPhone 5C my tables on my web page are half way off the page. How can I change that so my page width will not get any smaller than the minimum width of my table with CSS.
I have tried shaving as much space as possible but I can't seem to make my tables any smaller for mobile.
(mobile site [go to bottom of the page and select mobile version]) http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
Tables in question are in the tabs. Try resizing the page width in your browser as small as possible and you will see the problem.
As you can see in the image page is able to resize past tables minimum width.
This prevents the table content from bursting beyond the confines of its parent container, as in your screenshot.
#upgrades-datatable_wrapper {
width: 100%;
overflow: auto;
}
Screen sized to about 300 pixels
It is a common question to resize an iframe to fit its' content, however I want instead to set the content to fit specific dimensions.
Essentially my application captures HTML, along with user_1's screen dimensions. So that user_2's sees the same HTML and screen dimensions.
In cases where user_1's screen dimensions are larger than user_2's screen dimensions, user_2 would see an iframe with a horizontal scrollbar. In cases where user_2's screen dimensions are smaller than user_2's screen dimensions, user_2 would see an iframe without a horizontal scrollbar and centred content.
Taking into account things like media queries where smaller screen resolutions add for instance a burger menu. I'd like for the second user to see the same thing.
What effectively I'd love to do is set the iframe's inner scrollWidth.
The only thing I've been able to suss out is that setting the actual width of the iframe itself is the best way to start. Then perhaps in cases where the content needs to expand beyond the width of the iframe, to set the width of the html or body element inside the iframe.
But that too, introduces media query issues. Where maybe the iframe on user_2's screen is small enough to trigger a burger menu, even though the body's width was set to expand beyond the iframe's width.
Is there any way I can set the iframe to be any width I want, but for the content of the iframe to behave as though the iframe was larger? I hope I've explained my problem in a way that makes sense.
I want user_2 to see the same thing user_1 saw.
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.
Site in progress: http://www.modernfuture.net/wordpress
I've been banging my head against the wall over this for hours - when I resize my browsers width (by dragging the browser window's right resize handle) my site maintains that nice responsive centered effect I want for roughly 1/8th of my browsers window size. However when I drag the browser's right window resize handle from right to left past this point (roughly 1/8th the width of the browser window, when the browser window is taking up the full width of my 1080p screen) my site (header, content, and footer) stops staying centered and the resize handle crops over the site rather than maintaining the responsive centering that I'm looking to achieve.
I've tried applying the "margin: o auto;" trick to the body class and the wrapper class individually and simultaneously, but it doesn't yield the desired results.
I'm really at a loss for ideas here. Can anyone offer some insight please? Thanks!
You need to remove the width from body class and margin also need to set margin:0px;