move sidebar down in ipad portrait

Well, the site’s still in development, so I’d have to give you credentials to view it, but here’s a screen grab as an example — https://www.evernote.com/shard/s320/sh/ec51a205-d48a-4f28-9aa6-691cce92340d/232322d2f620236a3355e1f253484ba6 — see how all the columns are cramped — especially the sidebar (and this is after I’ve already done some work to remove some padding there). This has always been a problem with Enfold’s iPad portrait layouts, in my opinion — that view is too narrow for a sidebar, and if there’s a sidebar, there’s not enough room for two columns in the body area.

Thanks and leet me know if you have any other questions.

Thanks, Rikard, but that still left what looked like an empty column to the right of the content and left of the sidebar:
https://www.evernote.com/shard/s320/sh/e239d2ae-8e28-4673-8c67-3ae4729f81a1/4c32cbfc21698e9b6a0f147871c6b8a2
https://www.evernote.com/shard/s320/sh/f1f713c5-dc23-49ef-8bfa-bb24c571ce9f/b725e132e98742276e9fae72dd472cd5

I added some css which seems to handle that, but I’m not sure if it’s the best method or if it will maybe negatively affect other things in the site.

Also, the iPad Pro portrait layout — at 1024px wide — is wide enough to accommodate the right column, so I dropped the max width down to 1023px — maybe there’s a better/lower, more standard width I should use for that?

Finally, I left in my css for reducing the padding in the content and sidebar, for the iPad Pro portrait layout, since it was still a tad cramped.

So here’s what I ended up with, in total (including what you sent me above) — please let me know if you see any problems with this or have any suggestions for improvement, streamlining, etc.

Thanks!

/* MOVE SIDEBAR DOWN BELOW CONTENT IN TABLET PORTRAIT VIEW */
@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) and (orientation : portrait) { 
.container .av-content-small.units {
   width: 100% !important;
}
  .content .entry-content-wrapper {
    padding-right: 0;
}
  .content {
    border-right: none;
}
  .inner_sidebar {
    margin-left: 0;
}
  #top #main .sidebar {
    border-left: none;
    overflow: visible;
}
}
/* REDUCE PADDING IN IPAD PRO PORTRAIT VIEW */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
  .container {
      padding: 0px 30px;
  }
  .content, .sidebar {
    padding-top: 20px;
  }
  .inner_sidebar {
      margin-left: 30px;
  }
}

• This reply was modified 6 years, 3 months ago by sky19er.

OK, great, and thanks ;)

You can close it. Thanks.