Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 12, 2014 at 10:55 pm #263637
    axiomnews

    On several pages like this example, when the page width falls below 768 pixels, I want to either hide the left element (the photo + quotation) or force it below the main text content
    http://omniway.ca/site/the-way-we-care/core-programs/supportive-measures/
    How do I do this? Thanks.

    May 12, 2014 at 10:58 pm #263639
    Yigit

    Hi Ben!

    @media only screen and (max-width: 768px) {
.page-id-42 div.flex_column.av_one_third.first.avia-builder-el-0.el_before_av_two_third.avia-builder-el-first {
display: none;
}
.page-id-42 div.flex_column.av_two_third.avia-builder-el-2.el_after_av_one_third.avia-builder-el-last {
width: 100%;
}}

    P.S.: Please do not duplicated topics as it is making it harder for us and other users to follow.

    Best regards,
    Yigit

    May 13, 2014 at 9:05 pm #264212
    axiomnews

    Thank you. This works well. I was able to make it apply to all similar pages as follows.

    (For anyone wanting to achieve something similar, the general case works only because no other pages have the same layout structure.)

    @media only screen and (max-width: 768px) {
div.flex_column.av_one_third.first.avia-builder-el-0.el_before_av_two_third.avia-builder-el-first {
display: none;
}
div.flex_column.av_two_third.avia-builder-el-2.el_after_av_one_third.avia-builder-el-last {
width: 100%;
}}
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Hide an element (or change its display order) at narrower page widths’ is closed to new replies.