Show woocommerce product page as full-width on mobile theme Foodie Pro

[senordeer]

Hello, Foodie Pro works great with woocommerce, I am just having a problem with showing a single product page as full-width on mobile site. It's like the mobile theme reads the page as a content-sidebar page and the actual content only fills 50% of the mobile screen. This is only an issue on single product pages. I commented out sidebar bc I don't need it on any other page, it still only shows up as filling 50% of the screen. Sending screenshot below thanks in advance!

http://erikabonnell.com/product/jeweled-candle/

[rfmeier]

senordeer,

The single product page is actually displaying a 'singlular' post type, so Genesis doesn't really treat it as a page layout. You can trick it with the snippet below in your theme's functions.php file.

https://gist.github.com/fd958478a89849f85fafc3ee95f9f1a0.git

---

Ryan Meier – Twitter

[senordeer]

Hey Ryan - thanks so much. I added the snippet, and I still see it as only half a page (only on mobile though, totally fine on full-size devices). So I'm wondering if it's something in the mobile styling of Foodie Pro? I haven't touched the mobile CSS at all, but the snippet didn't seem to work for me unfortunately. Cleared cache, tried on 2 iphones.

[rfmeier]

senordeer,

There is a css rule for 767px

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

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds,
	.first {
		clear: none;
		margin-left: 2.564102564102564%;
		width: 48.717948717948715%;
	}

I added the following after line 2737 and it removed the margin. You can adjust left and right margins as needed.

.full-width-content .five-sixths,
.full-width-content .four-sixths,
.full-width-content .one-fourth,
.full-width-content .one-half,
.full-width-content .one-sixth,
.full-width-content .one-third,
.full-width-content .three-fourths,
.full-width-content .three-sixths,
.full-width-content .two-fourths,
.full-width-content .two-sixths,
.full-width-content .two-thirds,
.full-width-content .first {
    clear: none;
    margin-left: 0;
    padding-right: 0;
    width: 100%;
}

---

Ryan Meier – Twitter

[senordeer]

Rock on. Perfection. You're the best, my friend. Following on Twitter, cheers!

[Author]

Posts