in my page using jquery mobile I have a div and I would fixed the width without it depends to the devices where it is showed.for example in my iphone the div is showed correctly because the screen is small while in my ipad the div takes all the screen and it is really bad...how can I fixed its position?
<div style='width: 100px'></div>
This is just general but you want to look at CSS 3 media queries to customize your layout specific to a device.
Related
I've a problem in select box in Iphone. Because there is a lot of white space. I need to reduce the height and if I change the height it will change in other mobile browser too, so I need the solution for Iphone only.
#media queries of Css can Be Implemented.
Okay so I am trying to get my website to fit all resolutions or screen sizes because I am currently working on a 17" 1920x1080 screen size and my website looks fine but when i try run it on a 10" or 15" screen etc the website screws up, the content goes everywhere (mainly drops down) So I was wondering how this can be fixed?
Thanks
First of all you should use percentage values (e.g. width:20%; instead of width:200px;) whenever you can, so you don't rely on absolute pixel resolutions (which often screw up your whole design/layout).
For all the other things and tuning you should take a look onto the css media query (e.g. w3schools):
#media screen and (min-width:1024px) {
/* ... */
}
It sounds like your web content isn't being positioned relative to a fixed width parent container, because if it was a scrollbar would load rather than your containers being pushed down. If you want to make the website layout respond to the screen size then you'll need to use a responsive layout.
Here's more info on getting started with responsive design/development:
http://www.w3schools.com/css/css_responsive_intro.asp
You can also look at using a framework which is really good for learning responsive grid lay outs (and much more). Bootstrap is one of the most popular mobile first responsive frameworks:
http://www.w3schools.com/bootstrap/default.asp
http://getbootstrap.com/
You could dive in learning few things:
Relative Lengths
Flexbox
Media Queries
This is a tricky one. I have built a website using bootstrap and its brilliant. Brilliant for mobile/tablets. When it comes to desktop that's where the problem kicks in.
When the browser size is eg. 1000px (width of the body) then the site looks how it should. When the browser window is resized and is smaller, once it passes the sizes for tablet eg767px then the layout changes to make everything responsive.
Is there a way to keep the layout of the website exactly the same no matter what the window size, whilst being able to use bootstraps grid system?
Did you try the new grid options?
Especially .col-xs-* should help you.
Here is a little example from the docs.
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
You can use the media query #media handheld which is, theoretically, used only by handheld devies (phones and tablets).
See http://www.w3.org/TR/CSS2/media.html
If that doesn't work (because the phones aren't cooperating), you can substitute things like max-device-width for max-width, because browsers on phones are usually displayed full screen.
Of course there are always tablets that have the same screen size as a desktop monitor and that use windowed browsers like a desktop computer, but for those machines, do you still want to treat them differently than desktop computers?
As mentioned by #tim-bartsch the xs (extra small) grid class col-xs-* will act the same on every screen size. This will be describe in more detail at http://getbootstrap.com/getting-started/#disable-responsive.
If your layout also use a Navbar the above maybe don't help you. The instruction for this seems a little cryptic:
If using navbars, remove all navbar collapsing and expanding behavior.
In this case you could also try: https://github.com/bassjobsen/non-responsive-tb3
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.
I have a aparently an easy problem with the width of my container when accesing in mobile devices or small screens
I spent 3 hours wonder why but...I can´t find the way
this is the url >> http://goo.gl/ZlLn3
You can see how the header, the content and the footer are beign limited when accesed by ipad/iphone or you resize the browser in desktop...i don´t need to go responsive, I only want the design shows full in every device !
Try to use CSS media query
Target iPhone and iPad with CSS3 Media Queries
Media Queries for Standard Devices
It is caused by your combination of width: 100% and overflow: hidden.
The elements are not wider then the browser viewport (100%), and from they they overflow and you hide them ;)