Converting To Responsive Layout

[rctechs]

I have a few quarks in my design and I am new to CSS so just learning as I go (used to have a designer working with us but gone now).  The following site I used the Nomadic Theme for it about 1 1/2 years ago when creating it and it worked great.  Now client wanted to update for responsive design and keep same layout.  I got most updated (except for Margins and Padding) but my navigation is off to the left now.  Could that be do to my padding and margins are still px and not % or do I have a typo in my CSS.

Padding and Margins are throwing my off since you have to use the element container size and trying to find the container size is more difficult than I thought. I have not added the media queries yet.

Any ideas on the navigation? Also if you have tips on getting element container size that would help.

http://goo.gl/8qlMj

Sean

[AnitaC]

It seems you are actually editing the desktop version and not mobile. I am working with this very thing - teaching myself and this is what I did to get myself started. I would take out what you have there so far and start with this.

First, you need to add this to your Functions.php file - you need the Viewport so it will recognize the mobile devices:

// Add Viewport meta tag for mobile browsers
add_action( 'genesis_meta', 'custom_viewport_meta_tag' );
function custom_viewport_meta_tag() {
	echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">';
}

Then, I took the responsive code from the Sample Genesis theme and added it to the Style.css:

/*
14 Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape) ----------- */

@media only screen and (max-width: 1024px) {

	#wrap {
		max-width: 960px;
	}	

}

/* iPads (portrait) ----------- */

@media only screen and (max-width: 768px) {

	#wrap {
		padding: 0 5%;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.wrap,
	#footer .creds,
	#footer .gototop,
	#header .widget-area,
	#inner,
	#title-area,
	#wrap .sidebar,
	#wrap #content,
	#wrap #content-sidebar-wrap,
	#wrap #sidebar-alt {
		width: 100%;
	}

	.genesis-nav-menu li,
	#footer .creds,
	#footer .gototop,
	#header ul.genesis-nav-menu,
	#header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	#description,
	#footer .creds,
	#footer .gototop,
	#header .search-form,
	#title,
	#title-area {
		text-align: center;
	}

	.genesis-nav-menu a {
		padding: 20px 16px;
		padding: 1.25rem 1rem;
	}

	#title {
		margin: 16px 0;
		margin: 1rem 0;
	}

	#header .search-form {
		margin: 32px auto 0;
		margin: 2rem auto 0;
		width: 50%;
	}

	.genesis-nav-menu li.right {
		display: none;
	}

	#footer .wrap {
		padding: 24px 0;
		padding: 1.5rem 0;
	}

	.footer-widgets-1,
	#header .genesis-nav-menu {
		margin: 0;
	}

}

/* iPhones (portrait and landscape) ----------- */

@media only screen and (max-width: 480px) {

	html {
		font-size: 87.5%; /* 14px base */
	}

	#header .search-form {
		width: 100%;
	}

	.archive-page,
	.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 {
		margin: 0;
		width: 100%;
	}

}

From there... I am making edits and changing/adding/editing to get it to work.

Again, I've been teaching myself and this seems to be working for me. I am using a different theme though and I don't have any content to work with.

---

Need help with customization or troubleshooting? Reach out to me.

[rctechs]

Ya I started looking at it again over the last few days and I got much further along. At the time of posting I did not have any media queries I was just working on getting the desktop version to be flexible and look the same using %.  Much better now then I was last week.  I will take a look at the code you gave and it might help me quicker with my media queries.

Thanks

Sean

[rctechs]

Okay I got a lot done over the last few days but wanted to reach out to the community for assistance in a couple of things I can't seem to figure out.

I still have some tweaking to do as far as sidebars removing under the iPhone view but I can't seem to figure out why my site has a slight scroll bar on the iPhone view.  I must still have a set fixed width or something but can't figure it out.

Any assistance would be great.

Thanks

Sean

[cazwilson]

The functions.php update you mentioned, anitac, has saved me. I thought I was going crazy as my media queries weren't working.

Thank you!

[AnitaC]

Glad it worked for you @cazwilson. Make sure you copy your code and SAVE IT!!! All that work shouldn't go to waste when you can save it for another project!

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts