Thanks so much for your response. Hiding and displaying certain items in desktop or mobile makes sense, based on that article. It doesn’t, however, explain how to change the order of appearance in the mobile version.

How can I accomplish that? Many thanks again for the great support.

TB

Here’s the link: http://digitalengagementranking.com/

Working on desktop but not mobile at the moment.

I was able to resolve the issue on desktop by selecting 5 display columns instead of 4.

Ignore me mate, I found something else on the forums and adapted it below.

@media only screen and (max-width: 1250px) {
     .responsive #top .av-masonry-entry {
    	width: 49%!important;
	}}

@media only screen and (max-width: 655px) {
     .responsive #top .av-masonry-entry {
    	width: 100%!important;
	}}

That’s really helpful because I like some of the responsive things better for certain uses.

Thanks for your help, I learn a lot reading the forums!

Ok you can close this Topic i found a solution.
I just had to push the Save-Button at the end of additional styling, and suddenly the correct CSS appeard.
Seams to be a litle bug?
Anyway, now its working.

http://www.witschurke.de/home/?preview_id=677&preview_nonce=d3dbeedf91&_thumbnail_id=-1&preview=true

Hello,
here is the effect that I get when I introduce that code, I would like the text to appear in the middel of the foto instead of from the down party moving until the middle. I do not know why the masonry picture turns coloured and then comes back to black and white.

Thank you very much!

Here are all the CSS that I have introduced already:

.main_color .av-masonry {
background-color: white;
}

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
-webkit-animation: none;
animation: none;
}

.av-masonry .avia-arrow {
display: none !important;
}

#top figcaption.av-inner-masonry-content,
#top figcaption.av-inner-masonry-content .av-masonry-entry-title {
background: transparent !important;
}

span.av-masonry-date.meta-color.updated {
display: none;
}

.av-masonry-image-container {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
-webkit-transition: all .6s ease;
}
.av-masonry-image-container:hover {
filter: grayscale(0%);
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}

.av-masonry-entry .av-inner-masonry-content h3 {
color: #e5e5e5!important;
}

#top .av-masonry .av-inner-masonry-content {
align-items: center;
background: transparent;
display: flex !important;
justify-content: center;
height: 100%;
text-align: center;
width: 100%;
}

Hi, you can close the topic I found a solution :)

Thank you for your help.
Regards,
Thibault

Quick CSS:

.av-magazine-time {
display: none;
}

.tabcontainer .news-time {
display: none;
}

time[itemProp=”commentTime”] {
display: none;
}

#top #wrap_all .main_color h3.av-magazine-title {
font-size: 20px;
font-weight: normal;
text-transform: none;
}

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}}

.av-social-link-facebook a {
color: #fff !important;
background-color: #37589b !important;
}

.av-social-link-twitter a {
color: #fff !important;
background-color: #55ACEE !important;
}

.av-social-link-gplus a {
color: #fff !important;
background-color: #DD4C3B !important;
}

.av-social-link-pinterest a {
color: #fff !important;
background-color: #CB2026 !important;
}

.av-social-link-linkedin a {
color: #fff !important;
background-color: #0082BD !important;
}

.av-social-link-tumblr a {
color: #fff !important;
background-color: #2A445F !important;
}

.av-social-link-vk a {
color: #fff !important;
background-color: #527397 !important;
}

.av-social-link-reddit a {
color: #fff !important;
background-color: #FF4006 !important;
}

.av-social-link-mail a {
color: #fff !important;
background-color: #C6BE2F !important;
}

.av-share-link-description {
font-size: 20px;
text-align: center;
}

#top .comment_text { font-size: 16px; }
#top label { font-size: 16px; }

.slide-meta {
display: none!important;
}

.blog-categories.minor-meta {
display: none!important;
}

.comment-meta.commentmetadata {
display: none!important;
}

.news-headline {
font-size: 16px;
font-weight: normal;
}

.avia_combo_widget .top_tab .tab {
font-size: 14px;
}

@media only screen and (min-width: 990px) {
.only-mobile-menu-search { display: none !important; }}

#menu-main-menu {line-height: 1em;}

.sidebar_left.sidebar {
text-align: left;
}

.news-headline {
float: right;
width: 200px;
}

.news-thumb {
float: left !important;
}

.title_container .breadcrumb {
font-size: 15px;
left: 50px;
}

@media only screen and (max-width: 990px) {
.only-dt { display: none !important; }}

#top .avia-post-nav {
background: rgba(20,42,76,0.5);
}
#top .avia-post-nav:hover {
background: rgba(20,42,76,1.0);
}