This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to change mobile container width

  • Creator
    Topic
  • #11866
    mharpen
    Participant

    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!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #11876
    Jason Bobich
    Keymaster

    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.

    #11901
    mharpen
    Participant

    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;
    	}
    }
    #11902
    mharpen
    Participant

    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.