Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 8, 2019 at 5:34 pm #1146227
    brianzajac

    Hello,

    Please take a look at https://3das.com/interior-design/. On the desktop, it’s working well. On mobile / smaller screen sizes, any of the images I have on the right size are reflowing underneath the text (which I understand is normally how it should be done). Is if there is a way to get the image on the right side to always be above the text? I’m currently using two 1/2 column layout elements.

    Also note I’ve tried to hide a column section / cell, but it only hides on mobile & not desktop. If there’s an option to hide on desktop I did not see, please let me know.

    October 11, 2019 at 8:29 pm #1147242
    Victoria

    Hey Brian,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    October 29, 2019 at 6:36 pm #1152119
    brianzajac

    Victoria,
    Please see screenshot at https://www.screencast.com/t/fmfMF0zaYVxj

    November 2, 2019 at 6:08 pm #1153333
    Mike

    Hi,
    Sorry for the late reply, this can be achieved with some css like this:

    @media only screen and (max-width: 767px) { 
  #top.page-id-2927 .post-entry-2927 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.page-id-2927 .post-entry-2927 .flex_column.first.avia-builder-el-9 {
      order: 2 !important; 
  }
  #top.page-id-2927 .post-entry-2927 .flex_column.avia-builder-el-12 {
      order: 1 !important; 
  }
    #top.page-id-2927 .post-entry-2927 .flex_column.first.avia-builder-el-22 {
      order: 4 !important; 
  }
    #top.page-id-2927 .post-entry-2927 .flex_column.avia-builder-el-26 {
      order: 3 !important; 
  }
  }

    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field, but I notice the buttons also change their order, so to correct please put the pair of columns that make the right sided images into a color section so we can target them better. So you will then have two color sections each with two columns.

    Best regards,
    Mike

    November 22, 2019 at 7:33 pm #1159306
    brianzajac

    Thanks Mike,

    That worked for one page, but when I tried to apply to other pages, I can’t seem to replicate what you did. These are the 3 pages I need to update + I’ve changed them all to include color sections:
    https://3das.com/interior-design/
    https://3das.com/exterior-architectural-solutions/
    https://3das.com/developer-realtor/

    Here’s what I’ve done in the CSS, but I’m no coder. Please let me know what I’m doing incorrectly. Thanks!

    /*--- Mobile Layout Right column fix Start---*/
@media only screen and (max-width: 767px) { 
  #top.page-id-2927 .post-entry-2927 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.page-id-2927 .post-entry-2927 .flex_column.first.avia-builder-el-9 {
      order: 2 !important;  
}
  #top.page-id-2927 .post-entry-2927 .flex_column.avia-builder-el-12 {
      order: 1 !important;  
}
  #top.page-id-2927 .post-entry-2927 .flex_column.first.avia-builder-el-22 {
      order: 4 !important;  
}
  #top.page-id-2927 .post-entry-2927 .flex_column.avia-builder-el-26 {
      order: 3 !important;  
}
  
  #top.page-id-2950 .post-entry-2950 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.page-id-2950 .post-entry-2950 .flex_column.first.avia-builder-el-9 {
      order: 2 !important; 
}
  #top.page-id-2950 .post-entry-2950 .flex_column.avia-builder-el-12 {
      order: 1 !important;  
}
  #top.page-id-2950 .post-entry-2950 .flex_column.first.avia-builder-el-22 {
      order: 4 !important;  
}
  #top.page-id-2950 .post-entry-2950 .flex_column.avia-builder-el-26 {
      order: 3 !important;  
}

  #top.page-id-2982 .post-entry-2982 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important;  
}
  #top.page-id-2982 .post-entry-2982 .flex_column.first.avia-builder-el-9 {
      order: 2 !important;  
}
  #top.page-id-2982 .post-entry-2982 .flex_column.avia-builder-el-12 {
      order: 1 !important; 
}
  #top.page-id-2982 .post-entry-2982 .flex_column.first.avia-builder-el-22 {
      order: 4 !important;  
}
  #top.page-id-2982 .post-entry-2982 .flex_column.avia-builder-el-26 {
      order: 3 !important;  
}
}

/*--- Mobile Layout Right column fix End---*/
    November 23, 2019 at 6:49 pm #1159492
    Mike

    Hi,
    It looks like you are using the same avia-builder-el-[number] for every page, but it will be different for every page and these numbers will change as you add or change elements. So lets use avia-builder-el-first & avia-builder-el-last instead, this represents the two columns with in the color sections.
    We also know that we only need to change the second & forth color sections as long as each page follows the same left & right direction.
    So please try this css instead:

    @media only screen and (max-width: 767px) { 
  #top.page-id-2927 .post-entry-2927 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.page-id-2927 #av_section_2 .flex_column.avia-builder-el-first {
      order: 2 !important;  
}
  #top.page-id-2927 #av_section_2 .flex_column.avia-builder-el-last {
      order: 1 !important;  
}
  #top.page-id-2927 #av_section_4 .flex_column.avia-builder-el-last {
      order: 3 !important;  
}
  #top.page-id-2927 #av_section_4 .flex_column.avia-builder-el-first {
      order: 4 !important;  
}
#top.page-id-2950 .post-entry-2950 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
#top.page-id-2950 #av_section_2 .flex_column.avia-builder-el-first {
      order: 2 !important;  
}
  #top.page-id-2950 #av_section_2 .flex_column.avia-builder-el-last {
      order: 1 !important;  
}
  #top.page-id-2950 #av_section_4 .flex_column.avia-builder-el-last {
      order: 3 !important;  
}
  #top.page-id-2950 #av_section_4 .flex_column.avia-builder-el-first {
      order: 4 !important;  
}
#top.page-id-2982 .post-entry-2982 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important;  
}
#top.page-id-2982 #av_section_2 .flex_column.avia-builder-el-first {
      order: 2 !important;  
}
  #top.page-id-2982 #av_section_2 .flex_column.avia-builder-el-last {
      order: 1 !important;  
}
  #top.page-id-2982 #av_section_4 .flex_column.avia-builder-el-last {
      order: 3 !important;  
}
  #top.page-id-2982 #av_section_4 .flex_column.avia-builder-el-first {
      order: 4 !important;  
}
}

    Best regards,
    Mike

    November 25, 2019 at 3:01 am #1159744
    brianzajac

    Brilliant! Thanks Mike, I didn’t know “el-first” & “el-last” even existed. All looks great now & I understand what to do when I add more content in the future.

    November 25, 2019 at 12:05 pm #1159807
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Photos Above Text on Mobile’ is closed to new replies.