Making Adjacent Columns Go Stacked

  • Resolved Brendan Nagle

    (@thebrendannagle)


    6 years, 5 months ago

    I’m rebuilding my employer’s site with a different theme, to future-proof it, and this is one of my first big initiatives with Elementor + Ocean WP. I have a new page, new section section with 2 columns… which, if the browser is resized narrowly enough, will condense all the way into single-character lines (perhaps further due to L/R padding for the wider desktop view… it looks like trash by default on mobile). I would rather have its responsive nature split the section into stacked paragraphs. Any idea what the simple fix is?

    Bigger question… would it be noticeably faster to use page templates, or is there still a lot of this responsive-specific tweaking ahead, regardless of page origin?

    Thanks!!!
    Brendan

Viewing 7 replies - 1 through 7 (of 7 total)

  • On the 2 column, check your padding, that may be why the single characters. If you want the space, one option might be create 5 columns and add the text to column2 and 4 but drag the columns to the size you want.

    Thread Starter Brendan Nagle

    (@thebrendannagle)

    This seems to do the trick! Sort of. I’m using the overall section, columns, and individual text editors’ margins & padding to do my best to replicate the exact format of the current live site, but it’s really difficult. The current site has it done to absolute optical perfection, as if there was some line of code or discretely hidden cue that denoted the responsive timing / exact screen size by pixels (specifically, theirs stacks much sooner / wider than mine, which displays longer lines of copy, not a bunch of short lines, until the browser gets super thin… meanwhile my site retains 2 columns until quite thin, despite tinkering with the middle column and other attributes).

    I have yet to try and template pages. I remember there were a LOT advertised that came freely with the plugins or theme, probably both, but can’t seem to find either. Do you think any page templates with have this optimized responsiveness pre-designed? The manual sizing with padding / margins would seem to be nice for images and media, but for the copy and paragraphs, I feel like this has been perfected and is available somewhere already so I don’t need to reinvent the wheel, backwards.

    • This reply was modified 6 years, 5 months ago by Brendan Nagle.

    I have a site with very simple columns and when it goes to Mobile format, it is perfect. Is your text using the standard Text Widget? Take a look at fumccp.org and then drag the page in to make it narrow. I think you issue is with Padding and margins.

    Thread Starter Brendan Nagle

    (@thebrendannagle)

    Actually, mobile-testing it looks to match almost perfectly, definitely better than on desktop. I was only checking / resizing it on a desktop browser. However, the font also seems to drop a size… which works great, though I don’t know how to replicate this either on my build. I’m still searching / wondering if there’s a way to designate how narrow a browser must be (1200px or less, that kinda thing) to automate the columns to switch vertical instead of their normal horizontal.

    I believe I’m using the standard widget… Text Editor? Also – this is the free version of Elementor, as we’re kind of doing a try-before-buy here, though I don’t recall seeing any responsive-specific feature extensions with Pro, just additional features.

    I hope this makes sense! Thank you Les for your help on this.

    I don’t know if this help your specific issue but this is a great video about making the site Mobile responsive. It shows how to adjust may of the items on the page.

    Thread Starter Brendan Nagle

    (@thebrendannagle)

    Oh wow, this is IT!!! I’d clicked those little icons before but never tinkered around… I thought they were strictly viewing modes for your page in a frame of those dimensions. Sheesh! This is amazing, I feel like I just learned the Force. Seems like standard practice is to essentially build 2-3 versions of each page with these options. In your experience, have you found a greater need for layout differentiation between Desktop <-> Tablet, or Tablet <-> Mobile? The ‘Our App’ VS ‘Our Software’ button hides are a perfect example of functional differentiation (ie: apps on cells and tablets, software on computer), though I would expect most computer and tablet layouts to be visually comparable and only slight adjustments are needed, so I might build out for computer first, adjust, and then expect to do major fixes for mobile. Any thoughts on building the various layouts per page? We are a video-heavy company, FYI. Open to any general tips or suggestions.

    I will thoroughly digest the Elementor YouTube channel before shooting off at the hip on a question like this again… THANK YOU!!!

    Hi Brendan, Personally I have not used this option very much. My sites all seem to be very mobile responsive. I think this option comes in handy when you start making a lot of special adjustments to your site. As you mentioned, you got pretty creative so the spacing could be just right on your text area. The general responsive rules just didn’t work with that style. After looking at this video, it would seem a normal process to view every page with a mobile and then go back to make minor adjustments as needed. This is a great tool. “May the Force be with you”

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Making Adjacent Columns Go Stacked’ is closed to new replies.