Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 4, 2019 at 12:31 pm #1087016
    christwars

    Dear all,

    I use 4 pictures (with links set) in 4 1/4 layout elements in order to display a menu on our homepage. Now, I want 2 appearing beside each other in 2 rows on the mobile version. With the current setting they appear in big underneath each other.

    Any idea how to make them appearing beside each other in groups of 2 pictures? Should I use another layout element for this element?

    Thanks in advance
    Marcel

    April 7, 2019 at 2:49 am #1087873
    Mike

    Hey christwars,
    Sorry for the late reply, I couldn’t see your mockup because I was getting a 404. But I believe I understand what you were trying to do. Please see the screenshot in Private Content area of the results I achieved.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
#av_section_2 .flex_column_table .flex_column.av_one_fourth:nth-child(odd) {
    width: 48% !important; 
    float: right !important;
    padding: 20px 1px 1px 1px !important; 
    min-height: 268px !important; 
}
#av_section_2 .flex_column_table .flex_column.av_one_fourth:nth-child(even) {
    width: 48% !important; 
    float: left !important;
    padding: 20px 1px 1px 1px !important; 
    min-height: 268px !important; 
}
#av_section_2 .flex_column_table .flex_column.av_one_fourth .el_after_av_image {
    margin-top: 20px !important;
}
}

    Best regards,
    Mike

    April 8, 2019 at 10:31 am #1088223
    christwars

    Thank you for the nice solution!

    Now with your code provided it displays always the second icons in rows of 2. I also want another menu displayed like this. Can you explain a litte bit more of how your code works in order to address it to another avia section (the one with the grape icons)

    Best regards
    Marcel

    April 9, 2019 at 4:21 am #1088517
    Mike

    Hi,
    To target the next section you will just need to replace #av_section_2 with #av_section_3 and add it to your Quick CSS:

    @media only screen and (max-width: 767px) { 
#av_section_3 .flex_column_table .flex_column.av_one_fourth:nth-child(odd) {
    width: 48% !important; 
    float: right !important;
    padding: 20px 1px 1px 1px !important; 
    min-height: 268px !important; 
}
#av_section_3 .flex_column_table .flex_column.av_one_fourth:nth-child(even) {
    width: 48% !important; 
    float: left !important;
    padding: 20px 1px 1px 1px !important; 
    min-height: 268px !important; 
}
#av_section_3 .flex_column_table .flex_column.av_one_fourth .el_after_av_image {
    margin-top: 20px !important;
}
}

    Best regards,
    Mike

    April 9, 2019 at 9:57 am #1088601
    christwars

    Hey,

    thank you – it works perfectly!

    April 9, 2019 at 6:59 pm #1088813
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘2 images beside each other on mobile’ is closed to new replies.