Community Forums › Forums › Archived Forums › General Discussion › device testing
- This topic has 6 replies, 2 voices, and was last updated 7 years, 6 months ago by Tracy.
-
AuthorPosts
-
September 22, 2016 at 6:20 pm #193562TracyMember
there used to be a site that I went to that display how my websites would look across multiple mobile devices. Does anyone know of this?
September 23, 2016 at 8:32 am #193587ChristophMemberHi,
if you are talking about device testing, it was probably https://www.browserstack.com/
If you are talking about testing the breakpoints, there are quite a few options.
studiopress.com/responsive/
breakpointtester.comor the browser Blisk (blisk.io)
September 23, 2016 at 9:29 am #193598TracyMemberyes, thankyou Christoph. It was studiopress.com/responsive/ that I was looking for. So if I can ask another question...so sorry! When you initially go to the link studiopress.com/responsive/ until you get up to 1024 width the menu is just the lines that open up the menu when you click on it. I would love to do this on my site for mobile devices. Can you lead me to doing this please? I very much appreciate your help
September 23, 2016 at 7:20 pm #193620ChristophMemberHi Tracy,
do you want the mobile menu to show for more screen-sizes or does your theme not include a mobile menu?
What theme are you using?If you theme doesn't include a mobile menu, here are two plugins that work very well with Genesis themes:
https://wordpress.org/plugins/slicknav-mobile-menu/
http://robincornett.com/downloads/superside-me/
September 23, 2016 at 7:35 pm #193622TracyMemberHi, I'm using the Decor child theme. I don't think it does include a mobile menu but I don't know for sure. This is the code
@media only screen and (max-width: 1200px) { #nav, #wrap { min-width: 0; } .full-width-content #content, .wrap, #footer, #header, #inner { max-width: 960px; } #header .widget-area { width: 540px; } #content { width: 470px; } #content-sidebar-wrap { width: 790px; } .content-sidebar #content, .sidebar-content #content { width: 630px; } .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds { padding: 0; width: 100%; } .footer-widgets-1 { width: 300px; } .footer-widgets-2 { width: 300px; } .footer-widgets-3 { width: 300px; } } @media only screen and (max-width: 998px) { body { width: 100%; margin: 0 auto; } .full-width-content #content, .wrap, #footer, #header { max-width: none; } .archive-page, .content-sidebar #content, .content-sidebar-sidebar #content, .decor-landing #inner, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .full-width-content.decor-landing #content, .full-width-content #content, .sidebar, .sidebar-content #content, .sidebar-content-sidebar #content, .sidebar-sidebar-content #content, .wrap, #content-sidebar-wrap, #footer, #footer .wrap, #footer .creds, #footer .gototop, #footer-widgets .wrap, #header, #header .widget-area, #inner, #nav .wrap, #sidebar-alt, #subnav .wrap, #title-area, #wrap { width: 100%; } #wrap { background: none; overflow: hidden; } .page .page .wrap, .post .wrap, #footer .wrap, #inner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #inner { max-width: 850px; padding: 20px 20px 0; } #content, #content-sidebar-wrap { float: none; } .page .page .wrap, .post .wrap { background: none; width: 100%; } #description, #footer .creds, #footer .gototop, #header .widget-area, #title, #title-area { float: none; text-align: center; } .header-image #title-area, #title-area { margin: 0; padding: 10px 0; } .header-image #title-area, .header-image #title, .header-image #title a { float: none; margin: 0 auto; max-width: 400px; width: 100%; } #content, #description, #footer-widgets .wrap, #title a, #title a:hover { padding: 0; } #header, #nav { background: url(images/bg-footer-widgets.jpg); height: auto; overflow: hidden; } #header .widget-area { padding: 0 0 10px; } #header .searchform { float: none; padding: 0; text-align: center; } #header .s { margin: 0 -7px 0 0; } #nav { background: #89827a; } #header .menu { float: none; } .menu-primary li, .menu-secondary li, #header .menu li { display: inline-block; float: none; } .menu-primary a, .menu-secondary a, #header .menu a { padding: 7px 12px; } .menu li a .sf-sub-indicator { top: 20px; } .menu li.right { display: none; } .breadcrumb, .taxonomy-description { margin: 0 0 20px; } .navigation { padding: 10px 0; } .page .page .wrap .right-corner, .post .wrap .right-corner { right: -4px; width: 44px; } .post-meta { margin-right: 0; } #respond { padding: 0 20px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { margin: 0; } #footer .wrap { padding: 20px; } } @media only screen and (max-width: 400px) { h1, h2, h2 a, h2 a:visited { font-size: 30px; } .post-info, .post-photo .post-date, .post-meta { display: none; } #title { font-size: 48px; } #footer .wrap, #inner { padding: 5px; } .header-image #title-area a { -webkit-background-size: 100% auto !important; /* Older Android */ background-position: center !important; background-size: contain !important; } #nav { background: #89827a; } .page .page .wrap, .post .wrap { padding: 20px 20px 0; } .page .page, .post { margin-bottom: 20px; } #sidebar .widget .widget-wrap { padding: 66px 20px 20px; } #footer-widgets .enews-widget .widget-wrap, #sidebar .enews-widget .widget-wrap { padding: 20px; } }
September 24, 2016 at 8:16 am #193646ChristophMemberThe Decor theme doesn't have a mobile menu.
It's not just a change in the CSS but you have to add the necessary jQuery.Try one of the plugins I mentioned.
September 24, 2016 at 8:28 am #193647TracyMemberYes, thankyou. I'm playing with it right now. Works quite well.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.