Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1146227

    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.

    #1147242

    Hey Brian,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    #1152119

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

    #1153333

    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

    #1159306

    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---*/
    #1159492

    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

    #1159744

    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.

    #1159807

    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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Photos Above Text on Mobile’ is closed to new replies.