Demonolith

In my quest for a more responsive website I've found that placing my Lightbox image gallery in a table works well - I'm wondering though, based on how I'm using the code it will come back to bite my in the proverbial later down the line. Here's a page with 2 galleries .table { display: table; width: 100%; } table.lightbox-table td { text-align: center; margin: 0 auto; padding: 0; } .table-row { display: table-row; width: 100%; } .table-cell { display: table-cell; width: fit-content; border: solid 6px #575974; margin: 0; padding: 0; } .table-cell:hover { border: solid 6px #6f73a9; } @media screen and (min-width: 1200px) { .table, .table-row { display: block; margin: 15px 0; } .table-cell { display:inline-block; width: fit-content; } } @media screen and (max-width: 1200px) { .table, .table-row { display: block; margin: 15px 0; } .table-cell { display:inline-block; width: fit-content; } } @media screen and (max-width: 640px) { .table, .table-row { display: block; } .table-cell { display:inline-block; width: 32%; } } @media screen and (max-width: 400px) { .table, .table-row { display: block; } .table-cell { display:inline-block; width: 48%; } } <div id='gallery-1' class='row gallery galleryid-362 gallery-size-thumbnail'> <table class="lightbox-table" cellpadding="5px" border="0" width="100%" cellspacing="0"><tr><td> <div class="table"> <div class="table-row"> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-1.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-2.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-3.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-3.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-4.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-5.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-5.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-6.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-6.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-7.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-7.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-8.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-8.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-9.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-9.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-10.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-10.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-11.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-11.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-12.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-12.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-13.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-13.jpg" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-l-14.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/10/Blessing-of-the-Stations-of-the-Cross-Kevin-McDonald-s-14.jpg" /></a></div> </div> <!-- table-row --> </div> <!-- table --> </tr></table> </div> <!-- gallery-1 --> <div id='gallery-1' class='row gallery galleryid-362 gallery-size-thumbnail'> <table class="lightbox-table" cellpadding="5px" border="0" width="100%" cellspacing="0"><tr><td> <div class="table"> <div class="table-row"> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/1.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/110.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/2.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/210.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/3.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/36.png" width="228" height="148" /></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/4.jpg"><img class="alignnone wp-image-515 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/41.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/5.jpg"><img class="alignnone wp-image-481 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/51.png" width="228" height="148" /></a></div> <div class="table-cell"><a href="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/6.jpg"><img class="alignnone wp-image-482 size-full" src="http://greencastleparish.com/wordpress/wp-content/uploads/2015/05/61.png" width="228" height="148" /></a></div> </div> <!-- table-row --> </div> <!-- table --> </tr></table> </div> <!-- gallery-1 --> Are tables OK to use in the way I am or is there a better alternative? Cheers, Niall

Thanks guys, I'm going to leave the map for now and come back to it at a later date. Right now I'll concentrate on making the site responsive (firstly on mobile, then on tablets) and figure out why my pages are loading so slowly (I imagine unused Javascript and 50+ plugins would be a factor - making the site properly responsive will negate a few plugins anyhoo). I'll keep this thread marked as unsolved as I'll likely return to it.

In all honesty, I'm not sure how important the map would be to parishioners. Around 10 years ago I offered to do a website for my parish and it has gradually been growing in size since. The site was originally created using tables and is a mess - to my shame that version is still live. One day I decided to redesign the whole site using CSS, this to me was a large undertaking but I wanted to teach myself CSS and stay ahead of the curve. Once I had done that Google announced that the search results would be based on how mobile-friendly sites were. I then added a mobile theme I customised to suit my own aesthetic, once that was done I realised responsive was the way to go and that's where I'm at now! I took this redesign on by myself without being asked to (the site is voluntary so no payment is exchanged), but I'm taking it as an opportunity to better myself in the field. The map is on the old site using Flash (eurgh) and I wanted to see if I could update it to include the same functionality.

Really sorry guys, but your suggestions are going over my head in terms of getting them to work. I like the idea of using focus to highlight only one region while leaving the others gray (however, if that would mean the map would initially be all gray I wouldn't be keen) - I thought focus only worked on input types? Should the desktop version of the map be scrapped altogether because it is a fixed width and height and therefore not responsive for different screen sizes? In terms of the amount of content, I would prefer to keep the hovering method as putting all townlands, translations and description up at once would be both confusing to read to the average user and cramped. I found these 2 Codepens in search of ideas... not sure how relevant they are. One Two I appreciate all the help!

Thanks fisicx. I had originally done the map using raphael.js and got it functioning as I intended with a hover effect that would bring up a few lines of text on each region, but I couldn't figure out a way to resize it and have it work responsively on all screens. Is there a way to do so? If there is then it would solve my issue. If you open this page and view it on any screen over 640px you'll see the original (almost) fully functional map. For each region I have the name of the townland along with the Irish translation and a descriptive line or 2 - I feel this would be too much content to put below the map (I currently just have the region names along with the corresponding colours via an SVG background).

Thanks Fuzzy Logic. I amended the code to what you see below, but I can only get it to work with one region - with multiple classes it mixes up the colors. jQuery('path').click(function(){ jQuery(this).toggleClass('tievenameena tievebrack brackaghnorth'); }); <!-- Brackagh North --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="105px" width="100%" height="110px" viewBox="0 130 420 60" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve"> <path class="brackaghnorth" fill="#ff0000" stroke="#000000" stroke-width="1" transform="translate(0,45)" d="M 360.25 72.1 Q 341.75 75.4 338.4 73.6 L 319.8 83.35 319.8 83.4 Q 321.55 86.6 323.5 89.8 325.2 92.7 326.9 95.45 328.6 98.3 330.15 101.3 331.85 104.35 332.95 107.1 334.1 109.85 334.65 111.4 335.25 112.85 336.5 115 337.85 117.15 339.15 120.1 339.95 122.05 341.6 124.3 342.9 126.1 342.5 127.55 342.05 128.95 342.05 130.7 342 132.4 342 133.9 341.95 135.4 339.8 136.2 337.55 137.05 336.4 135.95 L 351.35 163.1 Q 375.1 150.5 398.15 142.05 398.2 139.55 398.6 136.25 399.15 132.9 399.85 129.3 400.65 125.8 400.35 122.3 406.5 107 405.75 92.7 L 398.2 69.1 388.4 68 370.6 75.9 360.25 72.1 Z"></path> </svg> <!-- Tievebrack --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="105px" width="100%" height="120px" viewBox="0 130 420 70" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve"> <path class="tievebrack" fill="#ffff00" stroke="#000000" stroke-width="1" transform="translate(264,128)" d="M 69.95 23.7 Q 68.85 20.95 67.15 17.9 65.6 14.9 63.9 12.05 62.2 9.3 60.5 6.4 58.55 3.2 56.8 0 L 56.55 0 48.65 4.1 46.1 11.2 Q 33.6 21 28.95 24.8 26.1 27 22.25 28.75 20.35 29.45 16.95 32.75 13.35 36.1 11.1 37.4 8.75 38.65 2.65 44.25 1.25 45.35 0 46.5 6.05 52.3 7.95 54.1 9.65 55.8 13.7 59.2 17.75 62.6 20.55 66.15 23.4 69.7 24.4 71 25.35 72.3 26.3 73.85 27.1 75.4 29.6 77.6 32.1 79.85 33.35 81.1 34 81.8 34.95 82.65 37.05 84.85 40.45 87.9 L 49.15 88.7 50 88.2 75 86.65 Q 83.65 85.4 88.35 79.7 L 73.4 52.55 Q 74.55 53.65 76.8 52.8 78.95 52 79 50.5 79 49 79.05 47.3 79.05 45.55 79.5 44.15 79.9 42.7 78.6 40.9 76.95 38.65 76.15 36.7 74.85 33.75 73.5 31.6 72.25 29.45 71.65 28 71.1 26.45 69.95 23.7 Z"/></path> </svg> <!-- Tievenameena --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="105px" width="100%" height="165px" viewBox="0 130 418 116" enable-background="new 0 0 1247.24 1360.63" xml:space="preserve"> <path class="tievenameena" fill="#0000ff" stroke="#000000" stroke-width="1" transform="translate(0,45)" d="M 237.9 160.3 Q 238.3 161 239.1 162.15 239.85 163.25 240.6 164.25 241.25 165.4 241.9 166.4 242.45 167.4 244.95 170.65 247.35 173.95 249.55 178.75 251.75 183.4 252.6 184.4 253.4 185.45 254.5 186.35 255.6 187.3 259.35 190.9 259.2 191.6 259.7 192.7 261 194.85 260.55 195.25 259.95 195.85 259.45 195.95 258.9 195.95 259.3 196.75 259.65 197.5 260.9 200 262.1 202.45 263.75 205.25 265.3 208.1 266.35 210.65 267.35 213.1 267.85 213.25 268.5 212.9 269.9 212.3 271.15 211.75 271.85 211.35 275.8 209.25 278.5 207.65 281.2 205.95 283.7 202.75 286.3 199.4 288.15 195.8 289.9 192.25 291.25 190.45 292.5 188.6 293.65 187.35 L 302.2 178 312.15 172.1 303.45 171.3 Q 300.05 168.25 297.95 166.05 297 165.2 296.35 164.5 295.1 163.25 292.6 161 290.1 158.8 289.3 157.25 288.35 155.7 287.4 154.4 286.4 153.1 283.55 149.55 280.75 146 276.7 142.6 272.65 139.2 270.95 137.5 269.05 135.7 263 129.9 258.15 133.95 253.4 136.8 251.6 138.35 250.05 139.8 248.55 141.2 240.3 145.65 234.15 148.95 231.75 149.6 232.8 152.15 233.75 153.9 234.65 155.7 235.45 156.7 236.15 157.8 236.8 158.65 237.45 159.55 237.9 160.3 Z"></path> </svg> .brackaghnorth { fill: #ff8080; } .tievebrack { fill: #ffff80; } .tievenameena { fill: #8080ff; } Intended Results Region 1 #ff8080 to #ff0000 Region 2 #ffff80 to #ffff00 Region 3 #8080ff to #00ffff Actual Results Region 1 #ff8080 to #8080ff Region 2 #ffff80 to #8080ff Region 3 #8080ff to #ffff80

I tried the following, but it doesn't seem to work - it's for the uppermost region. a svg:hover #brackaghnorth { fill: #ff0000; pointer-events: none;} a svg:active #brackaghnorth { fill: #ff0000; pointer-events: none;}

Hi all, I have an SVG map and would like to have it so that when on a phone if a user taps a region the colour will change and remain that colour until another colour e.g. Region begins as #ff0000 When tapped changes to #ffff00 Stays that colour until another region is tapped Here is the map (towards the bottom of the page) - excuse how it looks on screens larger than 640px, right now I'm focusing on phones. And here's my CSS: a svg:focus #brackaghnorth { fill: #ff0000; pointer-events: none; } a svg:hover #tievebrack { fill: #ffff00; pointer-events: none; } a svg:hover #tievenameena { fill: #0000ff; pointer-events: none; } a svg:hover #liggins { fill: #ff3366; pointer-events: none; } a svg:hover #ligatraght { fill: #009900; pointer-events: none; } a svg:hover #keerin { fill: #ff00ff; pointer-events: none; } a svg:hover #oaghmonicrory { fill: #ff9900; pointer-events: none; } a svg:hover #teebaneeast { fill: #9933cc; pointer-events: none; } a svg:hover #carnanransy { fill: #ccff00; pointer-events: none; } a svg:hover #crouck { fill: #0033cc; pointer-events: none; } a svg:hover #alwories { fill: #00ffff; pointer-events: none; } a svg:hover #monanameal { fill: #cc0000; pointer-events: none; } a svg:hover #aghascrebagh { fill: #ccffff; pointer-events: none; } a svg:hover #crockanboy { fill: #ff9900; pointer-events: none; } a svg:hover #sheskinshule { fill: #ffff99; pointer-events: none; } a svg:hover #formil { fill: #33ff00; pointer-events: none; } a svg:hover #binnafreaghan { fill: #cc0000; pointer-events: none; } a svg:hover #cashel { fill: #9966ff; } a svg:hover #backan { fill: #00ff00; } a svg:hover #brackaghsouth { fill: #ffff00; } a svg:hover #leaghan { fill: #00ffff; } a svg #brackaghnorth, a svg #tievebrack, a svg #tievenameena, a svg #liggins, a svg #ligatraght, a svg #keerin, a svg #oaghmonicrory, a svg #teebaneeast, a svg #carnanransy, a svg #crouck, a svg #alwories, a svg #monanameal, a svg #aghascrebagh, a svg #crockanboy, a svg #sheskinshule, a svg #formil, a svg #binnafreaghan, a svg #cashel, a svg #backan, a svg #brackaghsouth, a svg #leaghan { transition: 200ms; transition-timing-function: ease-in-out; -webkit-transition: 200ms; -webkit-transition-timing-function: ease-in-out; }

I only have a couple of instances where I feel the text should change so I'll try out TimW's method, thanks.

Didn't realise that. I have other cases where I'd like the wording to change, for instance

I've put that together, but it's not working for me (the div is empty) <a href="images/index/census2010.pdf" target="_blank"> <div class="welcome"> <div class="welcomenewparishioners"> <div class="registercensus"></div> </div> </div><!-- welcome --></a> .registercensus { font-size: 22px; letter-spacing: 3px; content: "Click here to register by filling out a parish census form"; } .registercensus { text-align: center; font-size: 7vw; line-height: 7vw; content:"Tap here to download a copy of the parish census form"; }

Is there a way to change a word in a line of text depending on the screen size? On desktop I'd like the line: but on phones and tablets I'd like

Got it, thanks. I also had a typo in my CSS that was preventing the media queries from being read when placed at the bottom.

In that case, would I need to move the media queries below what is mistakenly being called? When I do nothing is called.

Hi all, Can anyone tell me why my some media query declaration are not being called? I know media queries should be placed at the bottom of a stylesheet, but they only seem to work when I place them at the top and in some cases the original declarations are called. Here is a media query I set: @media(max-width: 640px) { .copyrightwrapper { position: relative; top: 0; bottom: 0; float: left; width: 100%; height: 30px; margin: 20px 0 0 0; padding: 5px 0px 25px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #999; border-top: solid 1px #ccc; } } Here is what's called even though my browser width is below 640px width: .copyrightwrapper { position: relative; top: 30px; bottom: 0px; float: left; width: 904px; color: #999; padding: 5px 0px 25px 0px; margin: 20px 15px 0 15px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-top: solid 1px #ccc; } Here's the page I'm using the CSS on.

Am I applying this incorrectly? I tried it on a much smaller-scale site via WAMP and it didn't work there either.

I've been having a go with media queries in an attempt to make the site more responsive, but it doesn't seem to be working for me. I've been using Bootstrap 3 breakpoints and placing them in 'Additional CSS', to start with I just tested them out by adding the following to make my top banner not appear on screen sizes under 480px (line 20). @import "https://fonts.googleapis.com/css?family=Oswald:400,300,700"; @import "https://fonts.googleapis.com/css?family=Kalam:400,300,700"; @import "https://fonts.googleapis.com/css?family=Simonetta:400,400i,900,900i"; @import "https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900"; @import "https://fonts.googleapis.com/css?family=Cinzel"; @import "https://fonts.googleapis.com/css?family=Voltaire"; @import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two'); /*================================================== = Bootstrap 3 Media Queries = ==================================================*/ /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { .topbanner { display: none; } } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { } I also added the following meta tag to header.php <meta name="viewport" content="width=device-width, initial-scale=1"> And here's the CSS for .topbanner as it appears in style.css .topbanner { font-family: Oswald; font-size: 26px; text-transform: uppercase; letter-spacing: 10px; text-align: center; color: #FFF; background: #000; padding: 3px 0 3px 10px; border-bottom: solid 1px #FFF; }

Thanks very much BrowserBugs, I'll certainly give them a read.

I'm going to move my site to a local server with an aim to make the theme more responsive while keeping the current version where it is in case things go wrong for me. I see now why making it more responsive is better, though I dread learning media queries - please tell me I'm over-reacting and they aren't that hard to get your head around!

At the moment the Jetpack theme appears as it does in the attached image - if I change to a responsive theme can I retain this design? The map would not function in the same way on mobiles and tablets - if I view on a mobile phone and request desktop view I can see the map, it will then let me tap on an area rather than 'hover'. Incidentally (sorry if this would be better suited to a separate topic, in which case I will move it if it is), I notice that the site loads very slowly - could this be due to messy Javascript / PHP etc.? Or do I need a better web host?

Yikes, I was hoping that wasn't the case but I'll accept it and adapt. In what way is the site not working well on tablet (I don't have one on-hand)? Instead of using a responsive theme can I use media queries to make the current theme responsive?

Hi all, I created an interactive map using Raphaël JS and although it appears on desktops it doesn't on mobiles - I am using a customised version of the Jetpack mobile theme. The map appears toward the bottom of this page. http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/raphael.js http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/map.js Can anyone help out please?

I added an s onto the end of wp_enqueue_script and that seems to have done the trick.

I did that, but the map still doesn't appear - I've cleared the cache too. // Interactive Map function interactive_map(){ wp_enqueue_script( 'raphael', get_template_directory_uri() .'/js/raphael.js', array(), false , true ); wp_enqueue_script( 'map', get_template_directory_uri() .'/js/map.js', array(), false , true ); } add_action( 'wp_enqueue_script', 'interactive_map'); // Interactive Map

Thanks for all the replies, sorry I haven't responded sooner. Forgive me for using what is clearly incorrect, but I've added the following code to the bottom of functions.php - the error has left, but then so has the map. // Interactive Map function interactive_map(){ wp_enqueue_script( 'raphael', get_template_directory_uri() .'/js/raphael.js', array(), false , true ); wp_enqueue_script( 'map', get_template_directory_uri() .'/js/map.js', array(), false , true ); add_action( 'wp_enqueue_script', 'interactive_map'); } // Interactive Map