device testing

[Tracy]

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?

[Christoph]

Hi,

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.com

or the browser Blisk (blisk.io)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tracy]

yes, 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

[Christoph]

Hi 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:

SlickNav Mobile Menu

http://robincornett.com/downloads/superside-me/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tracy]

Hi, 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;

	}

}

[Christoph]

The 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.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tracy]

Yes, thankyou. I'm playing with it right now. Works quite well.

[Author]

Posts