alefmemalef

Hi again Kelly or anyone else PLEASE!!! I've had a look at 'Responsivizer' and it seems like a fantastic extension but.. the website I've been asked to make responsive is a bit messy and the extension requires some more order and clarity. As I said - the media-queries.css file I worked on for quite a bit of time does do the job on various simulators and since I've been through the process of creating responsive websites before I am quite sure the job has actually been done. What I need to know is whether there is some code that could be responsible for making actual, real devices ignore the media-queries.css file. Julia, you suggested I show the code and I'd like to know which code could be helpful to determine where the problem is coming from? Thanks

Thanks Kelly for your response. What code would be helpful?

Hi, I have been asked to turn an existing Joomla 2.5.16 website into a responsive one. I created a media-queries.css file and adjusted all the styles using Firefox's Responsive Design Tool to test the results. All was fine until tested on real devices - both iPhone and Xperia - on both the website is totally unaffected by the media-queries.css file. I've tested the site with online simulators and although they show a less than desired outcome - they do show that the media-queries.css file is making a difference. I hope this is the right forum to post this issue as I realize it's not strictly a css problem that I'm facing. I would be grateful for any advice - are there scripts that could be blocking it or anything else I have to check? Thank you

I also tried removing the ; from the :lang(he) body { font-family: "Narkisblockregular", Arial; font-size: 14px; color: #154d66; :lang(he)}:lang(en) {font-family:Arial, Helvetica, sans-serif; font-size: 90%;} And I also tried replacing <meta http-equiv="Content-Type" content="text/html; meta charset="utf-8"> with <meta charset="utf-8"> But nothing works...

Yes, I have linked to the font. Now this is what I have in the head of my index.php file: <meta http-equiv="Content-Type" content="text/html; meta charset="utf-8"> and this is what I have in my css file body { font-family: "Narkisblockregular", Arial; font-size: 14px; color: #154d66; :lang(he);}:lang(en) {font-family:Arial, Helvetica, sans-serif; font-size: 90%;} But it's not working - see in the first line of this page: http://helppc.co.il/comps/computing-solutions Thanks

Thank you! Will check in the right places how to do that.

How would I do it in an inclusive way? Every page in this website has a background slideshow consisting of 3 different images, all in all I have around 60-70 images.

Hi, With the kind help of dsonesuk I learned recently that position:fixed is not fully supported by mobile devices and reverts to position:absolute. Here's my situation - The website I'm building for my client has a background slideshow that has to fill whatever screen it's viewed on and stay fixed whilst the content scrolls up over it. The slideshow therefore gets a position:fixed attribute. Sadly, on mobile devices the content does not scroll over it but continues beyond the bottom edge of the background image which is determined by the size of the screen, and that looks bad. So my question is - Is there a way to make the content scroll up over the background slideshow on mobile devices? Thanks

I'm doing quite a bit - img sizes, font sizes, different image sprites....

Dsonesuk hi again, After getting your colleague's help with media-queries.css and having fixed it, I now know that the css file is targeting devices properly so I am going back to my question following your reply from earlier on: Thanks

Hi, I found out that I do need to give a max-width to each one of them that is 1px less than the min-width of the next size up. That fixed it.

Thank you so much Newseed!! Wish I could have come across this information weeks ago.... I have a new problem though - the appearance of the website on the computer screen has been damaged now. I've tried giving the largest resolution I have a max-width as well but it hasn't helped. How do I make media-queries.css not affect the appearance on my computer screen?

oops, just saw I've got a reply from newseed regarding media-queries-css so I'll check that.

Thanks again Dsonesuk. That is incredibely important information!! I've tried position:absolute and now I notice that what you wrote is that this is something that happens automatically(?) Anyway... if this happens automatically, is there a good way to get around it? If what you did mean is what I originally understood, then using position:absolute did make the whole background image stretch in portrait position to fill the screen and all the content gets reduced respectively, but in landscape I still get the content continue past the image which means scrolling and going past the bottom edge of the background image. Now I'm not sure if this is not happening because of other problems I'm facing with clashes I think I might be having in my media-queries.css file. I posted a topic regarding that and I would be really happy if you could look at it as well. Cheers

Thanks a lot. I realise I actually missed the point and the problem lies elsewhere - on mobile devices the image scrolls together with the content and this is not what it should be doing. On computer screens the slideshow does in fact stay fixed (which is fine, that's what I need it to do) and the content scrolls vertically over it. Are you able to determine why this is not the case on mobile devices?

Hi, I have created a media-queries css file but have been struggling with it for weeks, as I suspect that some of my media queries clash. Sometimes changes I make to iPhone5 portrait affect the way the site appears and sometimes changes I make are completely ignored. These are the media queries I defined: For 800x600 screen: @media only screenand (min-width: 769px)and (max-width: 800px)and (max-height: 600px) { For iPad2 landscape:@media only screen and (width : 1024px)and (height : 768px)and (orientation : landscape) { For iPad2 portrait:@media only screen and (width : 768px)and (height : 1024px)and (orientation : portrait) { For iPad2 Air landscape:@media only screen and (width : 1024px)and (height : 672px)and (orientation : landscape) { For iPad2 Air portrait:@media only screen and (width : 672px)and (height : 1024px)and (orientation : portrait) { For iPhone5 landscape:@media only screen and (min-device-width : 320px) and (max-device-width : 568px)and (device-aspect-ratio: 40/71) and (orientation : landscape) { For iPhone5 portrait: @media only screen and (max-device-width : 320px) and (max-device-height : 568px)and (device-aspect-ratio: 40/71)and (orientation : portrait) { I started with the very straightforward queries given here: http://stephen.io/mediaqueries/ and introduced more and more features as part of my struggle... I played around with changing between min-height, height, max-height and min-width, width, max-width.... I tried an endless number of changes and my client is about to sue me (and they're a big firm of lawyers...) I also created many more queries to target iPhone 3G, iPhone4, GalaxyII, Nexus, Xperia.... but thought that the clashes were caused by them so removed them. Anyway, bottom line - HELP!!!! Thanks

Hi, I am trying to use the language attribute in order to style words written in English in Hebrew website. The language of the website is declared this way: <html lang="he-il" xml:lang="he-il" xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="8"> and in the css file I've attempted this: body { font-family: "Narkisblockregular", Arial; font-size: 14px; color: #154d66;}:lang(en) {font-family: arial, serif; font-size: 90%;} but the language attribute is being ignored. What am I doing wrong?

Hi, I have been struggling with trying to make a slideshow background work on mobile devices. Although the proportion of the background image is horizontal 1920x948, the clients wish to have it squeeze and stretch according to whatever screen the site is viewed on. The problem is that on mobile screens, once scrolling down in order to follow the content of the page, the background image gets cropped and does not continue further down with the scroll. Is there a way that I can handle this? See for example web page with content that exeeds the height of the screen: http://ww-law.co.il/ww-lawyers/en/yigal-weinstein How do I prevent the cropping of the image? Thank you