Good afternoon. I have a task to understand what is happening. Website was made before me.
If you try to resize the browser to 320x240 you will see that the site is adapted, and if you go through the mobile phone Android it is not. Someone can tell what's wrong? Where to start looking?
Website is using MasterPages. Almost all elements are HTML.
LINK
mif.antaris.ua
you need to look in css files for #media tags.
it seems like the mobile css has a max-width: 320px or something similar.
anyway, try putting all mobile css inside something like:
#media only screen and (max-width : 400px) {
/* mobile css */
}
this will apply the css code within the #media block only when screen width is lower than 400px.
hope that helps.
Related
I am sending a email from desktop/laptop to mobile devices, but it loosing css like line alignments spaces and text is coming horizontal.
so please tell me what css I must have to use for android and ios mobiles,
i am using this CSS but not working...
#media only screen and (max-device-width: 566px) {
.campaign_tem {
width: 80% !important;
}
.table_align {display:none !important;width:100%;color:red;}
} `
I ran into this not too long ago, but gmail only accepts inline-styling so nothing in the header.
I am trying to design a site that is easily accessible from tablets, smart phones, and desktops, and is equally usable from any device.
After a bit of reading, I found mixed numbers for the iPhone 4 resolution, which is 620px - 760px.
I am aware of using the following CSS to detect the type of media. However, the following CSS is not applied on my iPhone 4.
//detect smart phone
#media screen and (min-width:1px) and (max-width:780px) {
.inner-main-header{border:2px solid brown;}
}
Any ideas why this is? any suggestions what I can do in this case? my goal is to simply use one particular CSS for tablets and another for smart phones.
I appreciate any suggestions.
Many thanks in advance!
I believe it'd be min-device-width and max-device-width. Also, your pixels look a bit off:
//detect smart phone
#media screen and (max-device-width:640px) {
.inner-main-header{border:2px solid brown;}
}
//detect tablets
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
.inner-main-header{border:2px solid black;} //changed to black just to see difference
}
honestly I would use a site like this to redirect users to appropriate subdomains with their own respective css. If you opt not to do such a thing, I would suggest just using css to scale all the media based on screen size using values such as max-width: 100% and width:auto\9. Another good tutorial would be this youtube video good luck!
Creating HTML emails, I have the following seemingly insoluble problem:
Gmail strips out any in the head. You have to use inline styles.
I want my design to be different on mobile (specifically Android) which I can do with a media query in the head
But inline styles over-ride anything in the head.
So how can I make a design, for instance, 600px wide in Gmail but 100% wide on Android?
You can try to embed an <style> tag for email clients that do not remove them and override the inline rules with !important. It would look something like this:
#media all {
width:100% !important;
}
Please let me know if it works...
Use this inline css: style='width:100%; max-width: 580px;'
Once the screen width drops below 580px, the layout becomes fluid.
You can change the values for whatever fits your needs. This way, you don't run into as many cross client issues. Gmail app doesn't support tags btw.
I will be running my GWT generated Java script file on android and I am trying to get my UI to look the same regardless of the size of the mobile screen. Most of my views have 5 to 6 widgets , buttons, Textboxes mostly. I have put them in a FlexTable for now but maybe there is a better way to lay out the widgets?
My main question however is about how to use CSS to layout my widgets so the look and feel is the same across all screen sizes. Is this possible to do using CSS? If so would anyone have any CSS examples that focus on widget positioning?
For GWT on various screen sizes (and to handle landscape, portrait rotation) I use media queries. In this way you can define css rules for each screen size.
For example in the following below I never need myContentPanel to be larger than 450, but that is too large for iPhone/Android portrait views:
#media all and (max-width: 10024px) {
/*styles for narrow desktop browsers and iPad landscape */
.myContentPanel{
width: 450;
}
}
#media all and (max-width: 320px) {
/*styles for iPhone/Android portrait*/
.myContentPanel {
width: 320;
}
}
Here is a more complete css example http://snipplr.com/view/67341/
There is a great tutorial using jQuery here http://css-tricks.com/resolution-specific-stylesheets/
You can see more here at:
http://css-tricks.com/css-media-queries/
You can use ViewPort Meta tag to maintain proper widths and heights for your web applications on mobile devices too.. with out changing all the layouts .
The viewport meta tag to control layout on mobile browsers.
See the below question also ,which I already answered to set the viewport .
Achieving min-width with viewport meta tag
And also have a look at #media tag as user1258245 said
I have a project that is displaying 16px text font at 0.5ems links on the iPhone perfectly fine.
However, when I switch to an Android browser, the text font enlarges itself and my positioning of the links are screwed.
My links are in a
<p><a>[Link]</a></p>
statement.
Is there any way to prevent the Android text from resizing itself? Or is there a better solution to this?
EDIT:
I just realised the android browser doesn't allow for auto scrolling as well. Why is this so? Aren't both the iPhone and Android browsers using webkits as its base? Why are they so different even though they use the same technology? Are there any extra attributes i should declare in CSS for it to work the same as the Safari counterpart?
I had a similar problem as well. I had a design that was designed specifically for the Retina display, but the retina display actually has a pixel density of 2, so a pixel isn't necessarily a pixel (non retina iphone pixel width: 320px, retina: 640px).
To fix that, I put this in the <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'> so that a normal phone will scale as I expect, and the retina display would scale appropriately (half scale).
I'm not sure what kind of design you're using, but I'd play around with the initial-scale and maximum-scale, try both .5 and 1 and see what you get.
If you use pixels (px), it is related to the screen pixel density. An iPhone "retina" display would show text differently to your Android device.
This article covers the topic pretty well: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
I found a setting that might help in another question, Font size rendering inconsistencies on an iPhone:
body {
-webkit-text-size-adjust: 100%;
}
An alternate value is described in another question, Font size issue with iPhone:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Seems like one of these might prevent the android browser from resizing. Hope this helps.
If you want to stop Android from auto-scaling your pixel values, you can try adding this to your viewport meta:
target-densitydpi=device-dpi
Here's a good reference on the same:
http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui