Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 24, 2016 at 2:32 pm #716424
    friendlier

    Hi,

    I’ve created a homepage with alternating text blocks and images. These look great on desktop and iPad, but on mobile the images bunch together and the effect is spoiled.

    How do I style the mobile content to correct for this?

    Thanks

    Simon

    November 25, 2016 at 7:04 am #716669
    Rikard

    Hey Simon,

    Yes that is would be the natural flow on a layout like that and it’s difficult to change that other than creating a separate design to only show on mobile. You could try dragging your existing layout into a Color Section element and then give it an ID and then add CSS like this to hide it on mobile:

    @media only screen and (max-width: 767px) {
#your-desktop-section-id {
  display:none; 
}
}

    You can then add another section and add your mobile layout to it and hide the section for screens other than mobile with CSS like this:

    @media only screen and (min-width: 768px) {
#your-mobile-section-id {
  display:none; 
}
}

    Best regards,
    Rikard

    November 26, 2016 at 9:53 pm #717266
    friendlier

    Hi Rikard,

    Thank you for your reply.

    The problem with this is that the page is already made up of sections, so that solution isn’t viable. I’ll investigate some more and get back to you .

    best

    Simon

    November 26, 2016 at 10:11 pm #717269
    Basilis

    Hey!

    Please do take your time and let us know.
    Richards solution is the most valid, we can assure you for that.

    Thanks a lot

    Cheers!
    Basilis

    December 5, 2016 at 3:13 pm #720479
    friendlier

    Hi Rikard, Basilis

    How about:-

    #av_section_2 .entry-content-wrapper {
    display: flex;
    display: -ms-flex;
    flex-direction:column;
    }
    #av_section_2 .avia-builder-el-first {
    order:2;
    }

    December 6, 2016 at 9:10 am #720891
    Rikard

    Hi,

    Thanks for sharing that but I can’t really see any difference on the page? The second part still has the image under the text?

    Best regards,
    Rikard

    December 6, 2016 at 3:20 pm #721051
    friendlier

    Sorry Rikard,

    Error was with the section ID:-

    * hack to reorder in single column view the img/text in the second block of the home page*/
    #av_section_2 .entry-content-wrapper {
    display: flex;
    display: -ms-flex;
    flex-direction:column;
    }
    #av_section_2 .entry-content-wrapper .avia-builder-el-first {
    order:1;
    }
    }

    December 7, 2016 at 6:39 am #721369
    Rikard

    Hi,

    Cool! Nice code, thanks for sharing :-)

    Best regards,
    Rikard

    December 7, 2016 at 11:27 am #721424
    friendlier

    Very welcome ;-)

    best

    Simon

    December 8, 2016 at 5:40 am #721792
    Rikard

    Hi,

    Thanks, we’ll keep the thread open in case you have some more tips for us :D

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.