Monty1989

Ok I have narrowed down the problem. The video works outside of the masterslider but as soon as i put it into a slider within the masterslider it wont work on mobile devices. Any ideas of how to make it work as I want the video to be in the first slide. Please help Kind Regards

Hi all, I am seriously struggling to get my video within my masterslider to work on mobile devices, it works completely fine on desktops but on android and ios it just doesn't appear. Here is my website: http://www.shouthotels.com , and the video part of the code is below: You can view my source to see the css. <div class="ms-slide" data-delay="92" > <img src="img/slider/blank.gif"/> <video id="loading-vid"poster="img/slider/shout-hotels-video-cover.jpg" data-autopause="true" data-mute="false" data-loop="false" data-fill-mode="fit"> <source id="mp4" src="http://www.shouthotels.com/video-files/Shout-Hotels-Ltd.mp4" type='video/mp4' /> <source id="webm" src="http://www.shouthotels.com/video-files/Shout-Hotels-Ltd.webm" type='video/webm' /> <source id="ogg" src="http://www.shouthotels.com/video-files/Shout-Hotels-Ltd.ogg" type='video/ogg' /> </video> </div> Any ideas how to get this working on mobile devices? PLEASE HELP! Kind Regards

The more I think of it, this is just another way around it but the end result is not what im looking for. When I apply the following it works exactly the way i want it to in Google chrome, it stays width and heigh in proportion and resizes fine with my media querys: #slider img { max-width:100%; display: block; margin-right: auto; margin-left: auto; } HOWEVER, in IE and firefox both are still in the correct height and width proportions but when you resize the browser the image slider doesnt resize and it just gets cut off the screen. If I can work out how to make it resize in firefox and IE like it does in chrome I would be very happy. Let me know if you know whats causing this to happen in IE and firefox as it is doing my head in, I have lost 3 days of development all because of this stupid problem Kind Regards Jamie

Hi Sorry, My stylesheet was offline for a few hours there. OK ignore my last comment. my body with is 100% My table width is set to 1200px the image within this conatiner is set to 100% width HOWEVER with the styles you asked me to apply above "width:100%" it seems it is going 100% width of the page and NOT 100% width of the 1200px table. Hope this helps clear up the problem. Any ideas? Kind Regards Jamie

combining width with max-width should do the trick. That way the slider img will take up 100% of the tables size but never extend it #slider img { width:100%; max-width:100%; display: block; margin-right: auto; margin-left: auto; } Hi, Thanks again for your reply. I have changed the css to match what you have put above however it seems the image slider image is going to 100% width of the page and not 100% width of the table.... Infact hold on!!! After applying that style above it seems the 100% width is ignoring my set body size of 1200px hence why its stretching to 100% of the page?? Any ideas how to fix this? Regards Jamie

Hi, I have added it: #slider { width: 100%; height: auto; background-color: #cccccc; margin-top: 30px; -moz-box-sizing: border-box; /*vendor prefix for firefox */ box-sizing: border-box; } #slider img { max-width:100%; /*or width:100%; */ display: block; margin-right: auto; margin-left: auto; } But nothing is changed, have I done it wrong?? Putting min-width in your code makes the image go 100% of the page and not the container so I changed it to max-width which makes it stay 100% of its container however it doesnt resize in IE or firefox which is exactly the same as before. Please help! Should we make a fiddle to try combat the problem? Kind Regards Jamie

Anyone?

I think I have worked out the problem, so I would ask if someone could provide a solution to it: The problem here is that when i do width:100% for example "#slider img" then it seems to do 100% width OUTWITH its table container, how do I get it to do 100% width within its container? Kind Regards Jamie

Hi, These are div boxes. I just would really want someone to review my code and find the bit thats causing the issue, You see if i change min-width:100% to just width:100% on my image styles internet explorer & Firefox seems to then resize it correctly however the height of the image is massive for some reason and just isisnt the same as it is when i use the min-width: 100% Any ideas? Kind Regards Jamie

Hello Jamie The site is looking good I think you need to change your viewport metatag. Im not 100% sure but I think what you have now is not preventing mobile devices default zoom it only prevent users from zooming. change this <meta name="viewport" content="width=device-width, user-scalable=no"> To this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Also I share BlueDreamers confusion: Why would you want tables for all content when there are much more semantic tags available? It's not just a question of styling it will also make it easier to index your content for search engines. Hi, Many thanks! , its still got quite a bit to go but im combating the problems as I get them and this one has made me hit a brick wall. Thanks for the suggestion, I have now updated it with this however this doesnt solve my problems with the responsive side of things. On my samsung s5 and on google chrome everything adapts perfectly whereas firefox and IE seem to ignore the 100% width styles I have set and is not adjusting them accordingly like chrome is doing. (If you resize my website with your browser in chrome you will see it works fine but do the same in IE or Firefox and it just doesnt work) I have always been a table man, I have messed around with divs but just couldnt get my head around getting elements in the correct positions, so im sticking to what I know. I just need this problem resolved but I cant think why its not working in IE and firefox but works on everything else. PLEAS HELP! Kind Regards Jamie

I already have this applied: #slider { width: 100%; height: auto; background-color: #cccccc; margin-top: 30px; } #slider img { max-width: 100%; min-width: 100px; display: block; margin-right: auto; margin-left: auto; } Please view the css source code of my page to see it. Also regarding the tag <a name="home" /> , this is supposed to be like this as the jquery smooth scroll uses this unclosed tag to link Home to the anchor. The issue here is when you resize the browser in Chrome everything works flawlessly with my media querys but in Firefox and IE it doesnt seem to work properly. Any help would be much appreciated. Kind Regards Jamie

I have created a responsive website using purely tables, I DO NOT want to use divs. The responsive site works great in all browsers and devices that I have tested apart from IE (all versions) and Firefox. When I resize my browser the big image slider doesnt seem to apply my media queries I have set but in chrome it does. See here: http://www.shouthotels.com/dev.html It seems to be something to do with the "min-width: 100%" with my "#slider img" class I think. If I change it from min-width: 100% to just width:100% it seems to partially work on IE and firefox however the height of he image is massive. I have been staring at the code for hours and just cant pin point it so any help would be appreciated. Kind Regards Jamie

Aww man I really appreciate you typing this out but I'm no further forward with this, it would be really useful for me to see my code converted to what you are saying to do. Until I see my code converted I cant understand exactly what needs to be done.

Trying to get my page up to W3C standards but as the errors point out and that you have mentioned, I cant have the script running within the <select> tag becausxe if i move it out , it stops the calendar from working. So I need to work out a way of moving it out the <select> tag and keep it working.

I tried applying the var genOption = document.createElement to the end of my month-function.js file but didnt make any difference What am I supposed to do?