I found what I need. It’s this code in functions.php

add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
function avia_change_category_blog_layout($layout, $context){
if($context == 'archive') $layout = 'blog-grid';
return $layout;
}

But how can I edit the page though? I want a return button and the possibility for my readers to check out another category without having to return to the main-blog page. I know I could use a sidebar, but is there any other way?

Would you tell me how? I can’t figure it out. I guess I want masonry.
I want the site of a certain blog-category to look like the main blog-page, just with the posts of the selected category.

That’s great! Thanks a lot. Topic can be closed

Yeah, but it’s not so pretty as the one with the standard-editor. What’s the difference?

Perfect! Thanks a lot. Topic can be closed

perfect! thank you!
can I also change the align to the left only on mobile?

Thank you, can be closed

Thank you! Tat was an easy one ;)
Can be closed

Awesome! Thank you!

Topic can be closed

That worked!!
Thanks a lot!

Can I move the button to the left a bit?
I tried it with:

@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 325px;
    left: 300px;
}

But that doesn’t work.

Thanks, I guess I fixed my css by coping each code one by one back in.
On Desktop everything looks good again.
But the button on the mobile slider just won’t change.
Here is my current full css.

/* Header mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 50px !important;
}
.responsive .logo a {
    vertical-align: top !important;
}
.responsive .logo img {
    max-height: 50px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    top: -15px;
    height: 45px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
}
}
@media only screen and (max-width: 500px) { 
.responsive #top #wrap_all #main {
        padding-top: 50px !important;
    }
}
/* Farbe Nachrichtenversand */
h3.avia-form-success{
 color:#99a502!important;	
}
/* Text mit Foto*/
.avia_textblock p img {
	  border-radius: 100%;
	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
}
.avia_textblock img.alignleft {
  margin-right: 40px;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) { 
#hello .avia_textblock img {
	width: 50%;
}
}
/* ScrollDown Pfeil */
#top .scroll-down-link {
	color: #a47654;
}
/* Blog Leerzeile entfernen */
.page-id-691 #after_section_2 {
  display: none; 
}
/* Blog Postdatum entfernen */
.page-id-691 .av-masonry .av-masonry-date {
  display: none; 
}
/* SocialMedia Icons*/
#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: #c82161;
}
/* Icon Circle schneller*/
.avia_start_animation .avia-icon-circles-inner {
  transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
}
/* Desktop Menu*/
@media only screen and (max-width: 2500px) {
  #top #header.av_header_transparency .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header.av_header_transparency .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}
/* Header Button Desktop*/
@media only screen and (max-width: 450px) { 
.slideshow_inner_caption {
	top: -40px;
}
}
@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 500px;
    height: 56px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -125px;
}
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
    background-color: #c79a52;
    color: white;
    border-radius: 15px;
}
/* Header Button Mobile*/
@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 250px;
}
.home .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
}

Now I seem to have destroyed evertything.
I’m just not seeing through in the css anymore and now the desktop version is destroyed and mobile doesn’t change.

I’m frustrated

My Header meu is destroyed as well.
Can anyone help me to fix everything and to structure the css? I am lost

• This reply was modified 11 months ago by northorie.

Thank you, that helped :)
Topic can be closed

I guess this is the code for the slideshow button on desktop, isn’t it?

@media only screen and (max-width: 450px) { 
.slideshow_inner_caption {
	top: -40px;
}
}
@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 500px;
    height: 56px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -125px;
}
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
    background-color: #c79a52;
    color: white;
    border-radius: 15px;
}

I would probably need it a second time for the second element?

Hi,
I would like to place the button for the second full-screen-slider-element seperately from the first elemet for desktop.
Is that possible?