ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• January 9, 2017 at 7:40 am #309232
  nelga

  Member

  Post count: 31

  Hi guys,

  I’m having a weird issue with the responsive containers. I have a row with two columns in it.

  See screenshot: http://take.ms/0kobc

  In Chrome, the content responds how you would expect: 2 columns are visible in desktop width, and then if you make the window slimmer, the columns stack one on top of the other.

  In Safari and all the mobile browsers I’ve tested the stacking doesn’t seem to occur. It just continuously stretches the content so that both columns are 50% of the screen width, which both looks ugly and makes the content very hard to read.

  Is there a reason this is working in some browsers but not others?

  Cheers,
  Glen

  January 9, 2017 at 7:41 am #309233
  nelga

  Member

  Post count: 31

  This reply has been marked as private.
  January 9, 2017 at 3:51 pm #309320
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Can you add the code below to your custom css option.

  @media only screen and (max-width:767px) {
  .flexbox .browser-safari .spb-column-container.col-sm-6 {
      flex-basis: 100%;
  }
  }

  -Rui

  January 10, 2017 at 4:11 am #309388
  nelga

  Member

  Post count: 31

  Hi Rui,

  Thanks for the code.

  Unfortunately the issue was also prevalent on Samsung mobile phones, and Chrome browser on iOS etc. (so not just limited to Safari). In fact the only browser I tested that actually did stack the layout was Chrome on Mac.

  Is there something I can do in the page builder maybe to prevent this from happening? Rather than more custom CSS? Or is this responsive behaviour expected in Atelier?

  Cheers,
  Glen

  January 10, 2017 at 1:09 pm #309441
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  I tested in a Samsung S4 and it worked fine, can you try to clear the mobile browser cache and test again?

  -Rui

  January 10, 2017 at 2:46 pm #309487
  nelga

  Member

  Post count: 31

  Is there a way to get the columns to stack without writing a hack?

  January 12, 2017 at 12:48 pm #309868
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  This is only necessary until we release the next update and sort this in the theme code.

  -Rui

• Back to forum

  Posted in: Atelier