Mobile: @media: Turn off certain elements and change display order - Support

Tagged: enfold, media, media queries, mobile

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
October 25, 2013 at 10:18 am #180562
selvaria
Participant
Hello all

I was able to turn off certain elements of the homepage http://www.selvaria.ch/ 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 {
display:none;
}
}
```
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.

Thanks

Michael
October 28, 2013 at 8:19 am #181450

Josue
Inactive Moderator

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.

Regards,
Josue

October 29, 2013 at 5:41 pm #182155

selvaria
Participant

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.

Best

Michael
Author

Posts