Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 13, 2020 at 6:06 pm #1192923
    pan_wang0

    Hello

    I made a page according to the layout in this link: https://eu.tencatefabrics.com/products/military-police-fabrics/
    I ‘d like to my page show in this way on mobile, as below:

    the product photo is below heading/subheading title, then descripiton words.

    How can I do it?

    Thanks
    Kevin Pan

    March 17, 2020 at 5:09 pm #1193853
    Nikko

    Hi Wang,

    We apologize for the delayed response.
    Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:nth-child(3), 
  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:last-child {
    display: flex;
    flex-direction: column;
  }

  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:nth-child(3) .flex_column:first-child, 
  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:last-child .flex_column:first-child {
    order: 2;
  }

  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:nth-child(3) .flex_column:last-child, 
  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:last-child .flex_column:last-child {
    order: 1;
  }
}

    Best regards,
    Nikko

    March 18, 2020 at 4:43 am #1193981
    pan_wang0

    Hi Nikko,

    Awsome! you saved me!

    That’s the one I need. Just need do a little change, could you help me out? I’d like to the layout same as below screen shot.
    Page layout order

    Also please add more white sapce between next product title.

    Really appreciate!

    Best regards,
    Kevin Pan

    March 18, 2020 at 4:48 am #1193985
    pan_wang0

    It seems the scresn shot link broken.

    Please check below link:

    page layout order

    March 18, 2020 at 5:00 am #1193991
    Nikko

    Hi Kevin Pan,

    You’ll need to duplicate those Titles, put the duplicate title (Special Heading) on top of the images then make sure you hide it on desktop and tablet and show on mobile in the Visibility settings.
    As for the original title (I’m just making some labels to differentiate) set it’s Visibility settings to show in desktop and tablet and hide in mobile devices.

    Then remove the code I gave you then replace it with this CSS code:

    @media only screen and (max-width:767px) {
  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable {
    margin-bottom: 120px;
  }

  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:nth-child(3n+1) {
    display: flex;
    flex-direction: column;
  }

  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:nth-child(3n+1) .flex_column:first-child {
    order: 2;
  }

  .page-id-206 #after_section_2 .entry-content-wrapper .flex_column_table.av-equal-height-column-flextable:nth-child(3n+1) .flex_column:last-child {
    order: 1;
  }
}

    Best regards,
    Nikko

    March 20, 2020 at 4:56 am #1194680
    pan_wang0

    Thanks so much!

    March 20, 2020 at 5:05 am #1194686
    Nikko

    Hi pan_wang0,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Element Layout in mobile’ is closed to new replies.