Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 26, 2016 at 3:47 am #621839
    sky19er

    Hey guys, in the left column layout, do you have some css handy to shrink that left column sooner (like somewhere around 1220px), and then to switch the mobile view sooner (like at the 990px that’s available in the top header layout)?

    Thanks!

    April 27, 2016 at 5:43 am #622725
    Rikard

    Hey sky19er,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    April 27, 2016 at 6:47 am #622761
    sky19er

    Sure, it’s at http://5db.14d.myftpupload.com/ , but I’ll be taking the site live tonight (hopefully), so it might move to http://theyogurtshoppe.com/ — thanks!

    April 29, 2016 at 2:22 pm #624476
    Andy

    Hi,

    use this code inside of Quick CSS field:

    @media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) {
.flex_column.av_one_third.flex_column_div.av-zero-column-padding {
width: 100%;
}}

    and adjust media queries for different browser screen sizes as needed.

    Best regards,
    Andy

    May 1, 2016 at 1:23 am #625208
    sky19er

    Thanks, Andy, but that doesn’t seem to be doing anything. I drop that css in and out and reload the site at a width between those values and nothing seems to change. I’m still getting these super-narrow, cramped columns — especially the right sidebar — for example https://www.evernote.com/shard/s320/sh/35c28f19-b736-472a-aefe-ab808fef7f13/22768075105e938c867b9a191178bea7

    Can you give me some css to switch to mobile view at 900px, like the option the Top Header layout provides?

    Thanks again.

    May 3, 2016 at 10:53 am #626318
    Andy

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • the URL to the login screen
    • a valid username (with full administration capabilities)
    • as well as a password for that username

    Best regards,
    Andy

    May 3, 2016 at 11:31 am #626342
    sky19er

    Sure thing — sending privately — thanks! Note, all my css is in the Jetpack Custom CSS module (in Appearance > Custom CSS).

    May 4, 2016 at 11:55 am #627125
    Josue

    Hey!

    Try adding this code to the Quick CSS:

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

  .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ }
  .responsive #top { overflow-x: hidden; }
  .responsive .boxed#top, .responsive #top.boxed .stretch_full , 
  .responsive.html_boxed.html_header_sticky #header,
  .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; }
  .responsive #top .flex_column_table_cell{display: block;}
  .responsive #top .flex_column_table{display:block;}

  .responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left:0;
    padding-right:0;
    float:none;
  }
  .responsive .units, .responsive .unit {
    margin: 0;
  }

  .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }

  .responsive #top #wrap_all .av-flex-cells .no_margin{
	  display: block;
	  margin: 0;
	  height:auto !important;
	  overflow: hidden;
	  padding-left:8% !important;
	  padding-right:8% !important;
  }

  .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{
	    width: 100%;
		max-width: 100%;
		margin: 0 auto;  
  }

  .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{
	  padding-left:0% !important;
	  padding-right:0% !important;
  }

  .responsive #top #wrap_all .flex_column:empty{margin:0;}
}

    Cheers! 
    Josue

    May 5, 2016 at 8:26 am #627680
    sky19er

    Thanks, that’ll do — that’s better. I mean, it’d be nice if, when the sidebar drops down and the body area takes up that width, the body area still allowed two columns — there’s plenty of room for two columns after the sidebar drops down ( see https://www.evernote.com/shard/s320/sh/64e342cd-499a-4f31-a4cb-c7c64c8455e6/17891d3638d00db886d528fc4544422e ) — but I know that’s asking a lot ;) Thanks again!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘switch left column layout to mobile view sooner’ is closed to new replies.