thegingerkid

But sometimes people have their browsers shrunk down to a smaller size. Personally, I'm the type of person who has all windows at maximum all the time, because I don't like having various resized windows on the screen, but not everyone is the same. Some folks, especially Mac users from what I've seen, tend to have windows at half or 3/4 screen view, and I didn't really want the site going into the vertical layout above a particular (lower) width. Unfortunately, it sounds like you're telling me that, unlike the javascript for the galleries, media queries can't specifically target touch devices or identify things like tablets, so general dimension parameters are the only - somewhat inaccurate - way of estimating the appropriate design to use.

I know, and I just did that so it's working on the tablet now. But as I said, that also affects the desktop view. I really didn't want this vertical layout for larger size non-mobile windows. That's why I was hoping there was a way to specifically target mobile devices - or even better, target touch devices (which is what I was able to do when setting conditional javascript for the galleries) - instead of relying on a general width parameter.

Ingolme - but that's exactly the problem. The devices are NOT the same size. Even oriented for landscape, my tablet is just over half the size of my laptop screen. Even if they were closer in size, the photo galleries are set differently for touch devices. On a laptop or desktop, the galleries display as slideshows with hovering controls. On touch devices, it's a pain for people to keep tapping the screen to go from one image to the next, so the images all display in-line instead of as a slideshow. Furthermore, the site is supposed to switch to the vertical responsive design from 979px width downwards, which it seems to do on phones and most tablets, but is for some reason not doing on my cheapie Windows 8 tablet (not even in portrait mode) or an older ipad 3, which are roughly the same size as the other tablets where it worked just fine. dave - Thanks for the suggestion! I already know that the tablet recognizes media queries since as I said, the responsive design works if I kick up max-device-width to 2000px (although at that point, it also changes the standard laptop view too, which isn't good). However, I did upload a test page with the code you offered and got this on my laptop: CSS reports width is greater than 1000px Javascript reports window width: 1600px I then tried it on my tablet in landscape view and got: CSS reports width is greater than 1000px Javascript reports window width: 1024px Not sure where to go with that!

Thanks, but these seem to just be using width/height to identify the type of screen, which I have tried. The problem is that if I set the max-width or max-device-width high enough to work in landscape mode for the tablet, it then is also applying to the regular browser view on the desktop/laptop (in other words, full screen Firefox on my laptop is showing in responsive mode). I was hoping the "device" part would target only mobile devices and make that code irrelevant for laptops and desktops but it seems not...

My site's responsive design kicks in and works perfectly on laptops, desktops, phones (from what I've seen) and good tablets . However, I have a cheapie Windows 8 tablet and the conditional CSS does not work on that, nor does it work on my cousin's old ipad 3. It simply shows the normal desktop version of the site, which is fine for the main page but problematic for the photo galleries (and it's a photo portfolio so that's a major problem). I've copied my main CSS code below. If I duplicate all of the media queries in this file but change max-width to max-device-width, the responsive vertical design does kick in in portrait mode. However, landscape / horizontal view still shows the desktop version. Attempts to fix this by bumping up the max-device-width to 2000px do technically work for the tablet but also affect the normal desktop browser view, so that isn't a viable option. Is there any way to specifically target all mobile devices, both landscape and portrait views, without having it affect how the site is viewed on a laptop or desktop? /** Disable Minimum width of no responsive mode **/ #column-content { min-width : 0; } .hidden { display: none; visibility: hidden; } .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } .visible-desktop { display: block !important; } /* Portrait tablet to landscape and desktop */ @media screen and (max-width: 979px) { .hidden-desktop { display: block !important; } .visible-desktop { display: none !important ; } .visible-tablet { display: block !important; } .hidden-tablet { display: none !important; } } /* Phone and little tablet */ @media screen and (max-width: 767px) { .hidden-desktop { display: block !important; } .visible-desktop { display: none !important; } .visible-tablet { display: none !important; } .hidden-tablet { display: block !important; } .visible-phone { display: block !important; } .hidden-phone { display: none !important; } } /** MAIN MENU ** ** you can change the value for max-width below ( don't forget to put the same value in "css/ie8-responsive.css" and "css/ie7-responsive.css" ) **/ @media screen and (max-width: 979px) { .drop-down { position: relative; float: none; margin:0; padding:0; width: auto; height:auto; z-index: 10; } /* Disable position fixed for header */ .website-header { height:auto; } .website-header.fixed { position:relative; top:0; } .website-top.fixed { position:relative; top:0; } .website-top.fixed.with-header { top:0px; } .website-middle.fixed { margin-top: -150px; padding-top:0; } } @media screen and (max-width: 979px) { .website-footer.footer-home-page { position : relative; top:0; left:0; width:auto; } .empty-space-home-page { height:100%; } /** remove the fixed width of Google map **/ div[id*="googlemap"] { width:auto !important; } /** Video and Google map **/ .module_video { margin-top: 0; padding-bottom: 60px; position:relative !important; height: 400px !important; min-height:400px !important; } .module_google_map { margin-top: 0; position:relative !important; height: 50% !important; min-height:50% !important; } /** Column menu **/ #column-menu { position:relative; min-height:0; } .menu-white #column-menu { background-color : #8C001A; } .menu-black #column-menu { background-color : #000; } #main-column-menu { padding: 10px; background-color : #8C001A; } #column-menu, .nav_main, .search-module { width:auto; } .logo { padding:0 0 0 40px; margin: 0; float:left; } .logo span { line-height:48px; } .logo img { max-height : 55px; } h4.customlogo { color: #fff; text-align: left; width: 300px; } p.customlogo { color: #fff; text-align: left; } #translate { position: absolute; bottom: -30px; right: 35px; } .social-links li a img { width:20px; } /** Column content **/ #column-content { position:relative; min-height : 0; margin:0; } .module_google_map, .module_video { padding-left: 0; } #column-content > .top, #column-content > .bottom, #column-content > .full_width { position: relative; top:0; left:0; max-width:100%; } #column-content > .top .all-content { margin-bottom:0px; } #column-content #main-column-content .all-content { padding: 50px 16px 14px 16px; min-height:600px; /** second condition if height > 800px line 390 in this file **/ } .shadow-corner > .bottom { min-height:0px; background-image : none; padding:0; } .shadow-corner > .top { min-height:0px; background-image : none; padding:0; top:0; } /** CONTENT **/ .left_column, .right-module-position, .top-module-position, .bottom-module-position { float:none; padding: 12px 0 12px 0; margin:0; background-image:none; border:none; width : auto ; clear:both; } .left_column > div, .right-module-position > div { background-image:none; padding:0; } .right_column { overflow:visible; } .left_column .moduletable > div, .right-module-position .moduletable > div { clear:both; border:1px solid #ddd; margin:0 ; background: transparent url(../images/black-03.png) 0 0 repeat; } .white-text .left_column .moduletable > div, .white-text .right-module-position .moduletable > div { border:1px solid #666; } .main_component { padding: 0 6px; } } /* To display the background on all screen if tablet with portrait mode */ /* First condition if height < 800px line 266 in this file */ @media screen and (max-width: 979px) and (min-height: 800px) { #column-content #main-column-content .all-content { min-height:900px; } } /* Phone and little tablet */ @media screen and (max-width: 767px) { .logo { padding-left :0px; } .top_menu li { padding: 4px 2px 0 2px; } .user1, .user2, .user3, .user4, .user5, .user6, .right-module-position { float:none; padding:12px 0; margin:0; width : 100% !important; clear:both; } .user1, .user2, .user3, .user4, .user5, .user6 { margin : 8px 0 0 0; } .top-module-position .border > div, .bottom-module-position .border > div, .user1 .border > div, .user2 .border > div, .user3 .border > div, .user4 .border > div, .user5 .border > div, .user6 .border > div, .address .border > div, .translate .border > div, .search .border > div, top_menu .border > div, .bottom_menu .border > div { margin-bottom:8px; } .moduletable.shadow > div { margin-bottom:0 !important; } /********** Column layouts *********/ .one-half, .one-third, .two-third, .one-fourth, .two-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth { float: none; width:auto; margin : 10px 0; } }

Thanks but I'm new to media queries and spent ages getting the rest of the responsive deisgn to work as it does now. Is there any chance you could tell me exactly how to do that (remove the slideshow and force all images for that gallery to display in line)? I've tried a few things but am definitely doing something wrong.

I have a portfolio with js-based photo galleries (slideshow with prev/next controls) and am wondering if there is a simple way to do either of these things: - Force the gallery images to display in line rather than as a slideshow when the viewing window below a specific width, as is done here: http://wells-demo.squarespace.com/ (view it at normal maximum size on a computer and then shrink the window or view on mobile to see what I mean) - Set the gallery to autoplay ONLY on mobile devices, and leave it on manual for laptops and desktops. I've attached the CSS and js for the gallery modules. Is that okay? It seems like a lot of code to paste directly into the post but please let me know if I should do that instead. Just a note, there is an additional separate folder for the module itself but I don't think it's needed, since virtually all of the customization I did for this module was with the css and js files from the main site template folder, and that's where the media queries and autoplay code are located. If anyone knows how to achieve either or both of the above options, I would very much appreciate the help! gallery-css.txt gallery-javascript.txt gallery-javascript-min.txt

Hi, I'm just wondering what services people recommend for basic website monitoring. I don't need anything fancy; I was just hoping for a free or extremely cheap service that sends an email or otherwise notifies you when your site is down. I don't need a lot of in-depth reports or anything like that; just trying to get a general idea of my sites' uptime for now so that I can get an idea of how they're performing. Any suggestions? Thanks!

This is a Joomla extension and that's how it came: http://www.joomlack.fr/en/joomla-extensions/accordeonmenu-ck It's unusual....I've never actually seen php used that way with CSS before and it seems totally unnecessary but I was worried about messing up the extension by removing it. Do you have any idea how I can safely change it to a standard CSS file? It's a free extension so can get it from the link above and view the files and code that way. Any suggestions on altering it to draw from a normal CSS file instead, and removing all of the php code from the stylesheet, would be appreciated!

Sorry, never mind! I just did a temporary restore of the previous backup and downloaded the menu's CSS file to see what I did before. The correct approach was: <?php echo $id; ?> li.current a { color: #990012; background: #fff8b8; font-weight: bold; }

Oh wait...hmm...the background color is changing properly but the bullet point is changing to the color assigned in the {color: } style above, rather than the text changing to that color. I can't figure out how to change the color of the text itself; for some reason it's not working. Also, the style is only being applied to the secondary links, not the first level of links. Granted, I think all of them will have submenus so it probably doesn't matter but it would be nice to figure out why it's not being applied.

Yes! This worked perfectly: <?php echo $id; ?> li .current.active { color: #000; background: #fff8b8; } Thanks!

Hi guys, I'm having trouble setting the style for the current page links with this particular menu: http://tinyurl.com/hj9s9q9 I just want the nav bar link for the current page to be a different color. I actually DID customize it before and had it just right, but then the developer of the extension I'm using pushed an update. I updated and it reset everything I had done. I was able to redo the hover style I want but for some reason, I can't replicate what I did for the current link style. I've tried every combination I know but am clearly doing something wrong this time, even though I managed to do it without a problem the first time around. Here is the code: <?php header('content-type: text/css'); $id = 'ul#'.htmlspecialchars ( $_GET['cssid'] , ENT_QUOTES ); ?> /* main UL container */ <?php echo $id; ?> { padding: 5px; margin: 0; } /* style for all links */ <?php echo $id; ?> li { border-bottom: 1px solid #ddd; margin: 0; text-align: left; list-style: none; color: #666; background: none; } /* style for all links from the second level */ <?php echo $id; ?> li ul li { list-style-type : square; margin: 0 0 0 20px; border-bottom: none; border-top: 1px solid #ddd; } /* style for all anchors */ <?php echo $id; ?> li a { margin: 0; color: #000; text-align: left; display: block; padding-bottom: 7px; padding-left: 15px; padding-right: 4px; padding-top: 7px; text-decoration: none; background: none; } /* style for all anchors on mouseover */ <?php echo $id; ?> li a:hover { color: #000; background: #fff8b8; } /* style for all link descriptions */ <?php echo $id; ?> li a span.accordeonckdesc { display: block; } Can someone please tell me what to add in to gain control over styling the current page links? I tried setting up rules for both li and li ul li with every combination of .current, .current-link, etc. I could think of. Maybe I'm just having a weird brain spasm and blanking out on the obvious, but I have no idea what's going wrong or why I can't seem to do it this time. Thanks! -

Sorry for not responding sooner - for some reason, this forum isn't sending me email updates even though I have it set to instant notification. Anyway, it was getting close but I think ultimately there are just too many glitches when attempting to use the Supersized gallery in that way, so I tried out a different gallery option. It's working as it should in most ways but I need to sort out the fit-to-screen view before it's ready to go. I'm going to post my question for that in a new thread though, because it's a totally different module and a different issue. If I can get the fit-to-screen fixed, this new gallery will be perfect and much easier to manage than the other. Thanks so much for your help!

Well, I altered the code like so and am now getting the floating forward / backward icons I wanted: #prevslide, #nextslide { position:fixed; height:100%; top:0; opacity:0.6; z-index:20; } #prevslide { left:295px; width:58%; } #nextslide { right:10px; width:42%; } #prevslide:hover { cursor: url('img/back.png'), move; } #nextslide:hover { cursor: url('img/forward.png'), move; } However, due to the template's design, the creator set the main index.php file to include the controls on ALL pages. So I've just noticed that now that the forward / backward icons are actually visible / active, they are appearing on every single page, whether or not its a gallery. I'm not sure how to fix that and restrict the controls to gallery pages or the Supersized module only. I tried removing the prevslide and nextslide <a id> tags from index.php and placing them directly into the gallery article. I also copied the relevant code from the Supersized css file to the main css, since I assume the article is drawing directly from that. Unfortunately, nothing at all was showing when I tried that method - the gallery controls were hidden and inaccessible again. I can't imagine there's no easy way to display those controls on specific pages rather than placing them in the index.php file and forcing their presence on *every* page... Also, I've just noticed another unfortunate fact...although the solution you gave me in a previous post, for the positioning of the module, is fantastic on the average computer screen (forcing it to be centered within the black space and not underlap the menu at smaller window sizes, it creates a problem on mobile devices or when viewing the page at a very small browser size. With the default settings, the images are often right up against or slightly underlapping the menu, and they go almost halfway under the menu at certain browser window dimensions. However, the images do retain their normal size and, at small enough dimensions, like on a phone, they look as they should for a responsive design. With the new code, the images are centered on normal computer screens but when the window is sized down, or the page is viewed on a mobile device, the responsive elements seem to be in disarray. The image is tiny and pushed all the way to the right, cut off on the side, and when trying to enlarge it, the menus go all crazy and it disappears. I can certainly live without a play/pause option but I definitely can't have a gallery that looks like a mess on mobile devices, or a site that has gallery controls appearing on every page. I'm so frustrated because I thought I was done, but I just noticed those two issues and need to find a way of fixing them before moving on. Do you have any thoughts about keeping the gallery centered in the main content area, without losing the responsive elements for smaller windows? And/or would you have any suggestions for restricting the controls to the gallery pages? I'm not sure why my method didn't work, unless I overlooked something, which is possible... Thanks again; I truly appreciate your help!