Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #180562

    Hello all

    I was able to turn off certain elements of the homepage only for the mobile version via media queries:

    @media only screen and (max-width: 479px) {
    .home .flex_column.first div.avia_textblock:first-child,
     .home .flex_column.first div.avia_textblock, 
     .home .flex_column div.template-blog, DIV.avia-testimonial-wrapper.avia-slider-testimonials.avia-slider-1-testimonials.avia_animate_when_almost_visible.avia_start_animation,
     .home .flex_column.first div.avia-testimonial-wrapper, .home .flex_column div.template-blog {

    But I have problems finding the correct selector for some elements. See selvaria_01_mobile.png


    I also wonder, if it is possible to turn off certain elements for specific pages or group of pages and change the display order of the elements. See selvaria_02_mobile.png


    Any help would be appreciated.




    Hi Michael!

    To hide the text block as in the first img, use this selector (add it to the ones you already have):

    .avia-builder-el-10 .avia_textblock:first-child{ display: none !important; }

    Regarding affecting specific pages, yes it is possible, you just need to target them using their page-ids, for example the homepage is page-id-2451, so in the css just prefix it:

    .page-id-2451 .section-x{ display: none; }

    Finally, re-ordering would require a deeper customization, i don’t think we could cover that.



    Thank you Josue, we decided to not display that box then.

    And thanks for the hint .page-id-2451, the equivalent for a post is .post-entry-3034, so I’m covered.



Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Mobile: @media: Turn off certain elements and change display order’ is closed to new replies.