How to change mobile container width

[mharpen]

Hi Jason, I have to give you many many kudos. The Alyeska theme updates are fantastic. I keep seeing more and more of what you’ve done and am so impressed and happy with this theme. I will be definitely buying more.

I know you’re busy as heck, but just one question please. The mobile responsive view seems like it could use another step-down of width size, between the minimum width and the next larger width. If you hold a phone in landscape mode (not portrait mode), there’s almost 50% of the screen wasted. I have an HTC Evo 4g LTE. The left and right margins are quite large and the page is narrow. Holding the phone portrait (long side up and down) is fine, but turning the phone sideways seems to waste a lot of space for page content. Just my 2 cents, if that’s possible, to have another step-down in width to help utilize content space in phone landscape modes. Easier said than done, I know. Thanks again!!

Topic

[Jason Bobich]

Hello,

You could always just re-adjust the container width for when you get to that 767px cutoff to be wider, or possibly 100%. So in your custom CSS, you’d override like this:

@media (max-width: 767px) {
	.layout_boxed #top,
	.layout_boxed #featured,
	.layout_boxed #main,
	.layout_boxed #featured_below,
	.layout_boxed #bottom,
	.layout_boxed #after-footer {
		max-width: 480px;
	}
}

So, you’d just increase that number to whatever you want.

I personally think this doesn’t look great making that wider because when you stack the columns and have it spread all the way across those larger mobile screens, it’s a little harder on the eyes to skim so far across; that’s just my opinion.

[mharpen]

Thanks as always Jason! Some of my pages have iframes that show content that i’d like to show more of when in mobile mode. I see what you’re saying when stacking the columns, and not wanting to show a wide sidebar below, but it really does seem like a lot of realestate is wasted (on my HTC Evo) with the mobile setting at 480px and my phone turned sideways. When I change it to 620px (in my CSS below) it still leaves a reasonable border around the edge of the page and allows enough room for my various content and iframes. Thanks again. Below is the CSS I’m using if anyone’s interested.

/* Optimized for Mobile Devices - to override theme's 480px max-width */
@media (max-width: 767px) {
	/* Boxed Layout */
	.layout_boxed #top,
	.layout_boxed #featured,
	.layout_boxed #main,
	.layout_boxed #featured_below,
	.layout_boxed #bottom,
	.layout_boxed #after-footer {
 		max-width: 620px;
 	}

	/* Stretch Layout */
	.layout_stretch #top #header_content,
	.layout_stretch.menu_flip #top #menu-wrapper .menu-wrapper-inner,
	.layout_stretch.mobile_nav_style_1 #top #menu-wrapper .menu-wrapper-inner,
	.layout_stretch #featured .featured-inner,
	.layout_stretch #main .main-inner,
	.layout_stretch #featured_below .featured_below-inner,
	.layout_stretch #bottom #colophon,
	.layout_stretch #after-footer .after-footer-middle,
	.layout_stretch .flip-menu {
		max-width: 620px;
	}
}

[mharpen]

just one other small thing, in case you haven’t noticed. the Carrousel slider extends beyond the page width in mobile mode. thanks as always!

[Author]

Replies