Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 24, 2018 at 10:57 am #1025846
    whdsolutions

    I am part way through a build and can see that the site (when viewed on tablets) does not go responsive.

    Columns are still present and it looks pretty bad…

    What CSS do I need to tell the site to hit responsive at (let’s say) 1280px ?

    Your help is ALWAYS appreciated!

    October 24, 2018 at 4:10 pm #1025957
    whdsolutions

    I want the site in mobile view on portrait iPad2

    • This reply was modified 6 years, 1 month ago by whdsolutions.
    October 24, 2018 at 4:21 pm #1025965
    whdsolutions

    Here is a simple sketch – way too busy here to do a mock-up sorry!

    October 24, 2018 at 7:11 pm #1026060
    Victoria

    Hi whdsolutions,

    Best regards,
    Victoria

    October 25, 2018 at 9:04 am #1026231
    whdsolutions

    Website is up :-)

    October 25, 2018 at 9:12 am #1026235
    whdsolutions

    You can see how it looks on the iPad in portrait mode

    REALLY BAD

    October 25, 2018 at 9:28 am #1026244
    whdsolutions

    Does ANYONE KNOW how to do this – I have tried EVERY bit of CSS I can find on the forums

    My client is going crazy here!!!!

    October 25, 2018 at 9:56 am #1026256
    whdsolutions

    I have tried this

    this does NOT WORK either :-(

    @media only screen and (max-width: 1200px) {
    .flex_column { width: 100% !important; margin-left: 0; }}

    October 25, 2018 at 9:14 pm #1026550
    Victoria

    Hi whdsolutions,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (min-width: 768px) and (max-width: 989px) {
  #av_section_2 .flex_column_table,
  #av_section_3 .flex_column_table,
  #av_section_4 .flex_column_table {
      display: block;
      table-layout: none;
  }
  #av_section_2 .flex_column_table_cell,
  #av_section_3 .flex_column_table_cell,
  #av_section_4 .flex_column_table_cell {
    display: block;
    margin-left: 0;
  }
}

    Please refrain from bumping or replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding.
    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 26, 2018 at 10:52 am #1026696
    whdsolutions

    Still not right – the columns are STILL 1/2 and 1/2 but underneath each other :-(

    Why are the columns not going full width???

    There are login details below if you need to take a closer look…

    PS I have removed the latest code as it looked so bad!

    • This reply was modified 6 years, 1 month ago by whdsolutions.
    October 29, 2018 at 10:14 am #1027420
    whdsolutions

    Any news on this???

    My client is getting very very twitchy about this!

    October 29, 2018 at 11:16 am #1027441
    Victoria

    Hi whdsolutions,

    Add this code too:

    
@media only screen and (min-width: 768px) and (max-width: 989px) {
  div .av_three_fifth, div .av_two_fifth, div .av_one_half {
      margin-left: 0%;
      width: 100%;
  }
}

    Best regards,
    Victoria

    October 29, 2018 at 11:49 am #1027466
    whdsolutions

    Superb!!!

    finally, Is there a way to add a little spacing between the columns when they rearrange?

    October 29, 2018 at 2:18 pm #1027559
    Victoria

    Hi whdsolutions,

    Try the code like this:

    
@media only screen and (min-width: 768px) and (max-width: 989px) {
  div .av_three_fifth, div .av_two_fifth, div .av_one_half {
      margin-left: 0%;
      width: 100%;
      margin-top: 5%;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.