Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 5, 2017 at 9:34 pm #804177
    Jasmer

    Hi!

    This page look excellent on desktop, but on mobile the photos are scrambled. I understand why this is happening, but I’d like to change it. I attempted to use a different element, but it didn’t look right.

    ***I’d like to have the images show before the bio. So first employee photo then below employee bio.

    Is there CSS that would reorder these? Do you have any suggestions for the future?

    June 5, 2017 at 11:50 pm #804229
    Jordan Shannon

    Hey Jasmer,

    You could create a second version of the section (and place it at the bottom) and use classes like this for each respective section so the top one only appears in desktop and the bottom one in mobile. That way you can properly arrange the mobile one to whatever you’d like it to be:

    .only-mobile{
    display: block !important;
}
.only-desktop{
    display: none !important;
}
@media only screen and (min-width: 767px) {
    .only-mobile{ 
        display: none !important;
    }
    .only-desktop{
        display: block !important;
    }
}

    Best regards,
    Jordan Shannon

    June 6, 2017 at 4:23 am #804274
    Jasmer

    Jordan,

    You’re awesome! Excellent idea💡

    1. Desktop Site: I’d like to have ONLY the first 4 bios shown as they are.

    2. Mobile Site: I’d like to show ONLY the last 4 bios shown as they are.

    3. Desktop Site & Mobile Site: I want to keep all other elements on both sites. There are elements above and below them.

    Note: I did not use the bio blocks normally. I added text blocks and font blocks and then put them in individual 1/1 layout element containers.

    What would be the correct classes for this? I’m far from an expert at this.

    Thanks so much,

    Jas

    June 6, 2017 at 4:13 pm #804557
    Jordan Shannon

    Hi,

    You can give the class whatever you need. If you want, you can copy the classes (only-desktop, only-mobile) from the css I have posted above.

    Best regards,
    Jordan Shannon

    June 7, 2017 at 12:04 am #804749
    Jasmer

    Hi Jordan,

    I need specific, full and verbose directions.

    Do I need to put everything in a color section and apply a Section ID? I don’t particularly want to add color sections and I don’t see a way to add a Section ID without adding a color section. I’d prefer to keep the structure as it is and hide and show the existing blocks..

    As you can see there are many layout blocks that would have to be addressed.

    Thanks for your help,

    Jas

    June 7, 2017 at 12:18 am #804752
    Jasmer

    Update: I have solved 50% of the problem.

    There is an element option to hide some of the blocks on mobile.

    So I just want to hide:
    The last four 1/1 element blocks on the page, from the desktop site only.

    June 7, 2017 at 8:47 am #804924
    John Torvik

    Hi,

    To hide any element, you need to enable the custom CSS class following this article: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ – and just add a display none property with a media query.

    Best regards,
    John Torvik

    June 7, 2017 at 9:32 am #804957
    Jasmer

    Hi!

    This seems to work to hide these elements on the desktop site. Is this correct?

    /*Hide Team Profiles on Desktop Site*/

    @media only screen and (min-width: 767px) {
    .team_image_1 { display: none !important; }}

    @media only screen and (min-width: 767px) {
    .team_image_2 { display: none !important; }}

    @media only screen and (min-width: 767px) {
    .team_image_3 { display: none !important; }}

    @media only screen and (min-width: 767px) {
    .team_image_4 { display: none !important; }}

    Thank you,

    Jas

    • This reply was modified 7 years, 6 months ago by Jasmer.
    June 7, 2017 at 3:01 pm #805099
    Jordan Shannon

    Hi,

    Yes, what you have above should hide the elements on desktop.

    Best regards,
    Jordan Shannon

    June 9, 2017 at 11:03 am #806005
    Jasmer

    Thanks Jordan! You can close this topic.

    June 9, 2017 at 3:34 pm #806110
    Jordan Shannon

    Hi,

    Great I am glad this was able to be worked out.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Column Cell Reorder on Mobile Site’ is closed to new replies.