Hi,

Maybe you could try to create a new section to only show on mobile and upload an image better adapted to small screens? You can then give your sections unique IDs and show/hide them for the correct screen size using CSS:

@media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

Best regards,
Rikard

Hi,

Great, glad it’s working :-)

Please let us know if you should need any further help on the topic.

Best regards,
Rikard

Hi Tom,

Great, glad we could help :-)

Please let us know if you should need any further help on the topic.

Regards,
Rikard

Hey!

Thank you for the info.

1.) Please follow the instructions here. https://kriesi.at/support/topic/ajax-preview-portfolio-like-google-images/#post-692047

2.) I can’t reproduce the same issue on my installation. The hover effect is applied to the portfolio items regardless of its position within the builder. The problem with the page is that the section containing the portfolio grid is outside the main container. Please make sure that all elements or set of elements are inside their own color sections.

Cheers!
Ismael

Hey!

I tried to modify the layer slider but I’m getting a “background request blocked” error. Please follow the instruction in the following thread if you want the video to fill the layer slider container. Note that you can also use the color section or the full screen slider instead of the layer slider.

// https://kriesi.at/support/topic/layerslider-zoom-video-to-fill-banner-space/#post-327976

Cheers!
Ismael

Hey!

Please use the “avia_masonry_entries_query” filter.

Related threads:
// https://kriesi.at/support/topic/how-to-change-category-tag-archive-etc-pages-to-look-like-avia-masonry-grid/#post-661134
// https://kriesi.at/support/topic/masonry-element-is-not-working/#post-668823
// https://kriesi.at/support/topic/masonry-for-pages-2/#post-672210

Cheers!
Ismael

Hi obrien247,

Mobile screens are a lot smaller than desktop ones so some differences will be inevitable, what exactly are you looking to change/alter?

Thanks,
Rikard

Hi!

I’m sorry but I can’t reproduce the issue on my end either. Please try to increase the width of the column slightly.

#top .no_margin.av_one_third {
    width: 33.35%;
}

Adjust the values as necessary.

Best regards,
Ismael

Hi!

We modified the css codes in the Quick CSS field.

#top .sub_menu > ul {
    float: right;
    margin-right: 20px;
}

.rtl .widgettitle {
    text-align: right!important;
    direction: rtl !important;
}

@media only screen and (max-width: 989px) {
  .responsive #top #searchform {
      display: none !important;
  }
  .responsive #header_meta .sub_menu {
      min-width: auto;
  }

  .responsive #header_meta {
      display: block !important;
  }

  .responsive #header_meta .sub_menu {
      background: rgba(0, 0, 0, 0);
      padding-left: 0;
      padding-top: 0px;
      position: relative !important;
  }

  #header_meta {
      margin-bottom: 30px;
  }

  .responsive #top #header_meta .container {
      background: #0077b4;
      width: 100%;
      max-width: 100%;
  }

  .responsive .avia_wpml_language_switch {
    height: auto;
  }

  .responsive #top .sub_menu li {
    line-height: 30px;
    top: -8px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #header_meta {
    margin-bottom: 0;
  }

  #top ul.avia_wpml_language_switch li {
    top: 10px;
  }

  .responsive #top .sub_menu li {
    top: 0px;
  }

  .responsive #top .sub_menu a {
    top: 0;
  }
}

Cheers!
Ismael

Hi!

Thanks for your kind words!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 767px) {
.responsive #top .logo img {
    margin: auto;
}
.responsive #top .logo {
    width: 100%!important;
}}

Best regards,
Yigit

• This reply was modified 9 years, 5 months ago by Yigit.

Hi!

Please try adding following line to your wp-config.php file near top

define('CONCATENATE_SCRIPTS', false );

Regards,
Yigit

Hey Rene!

That because of your CSS customization. Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

.header_color .avia-menu-fx, .header_color .avia-menu-fx:hover, .html_header_top .header_color .main_menu ul:first-child > li > ul, .sub-menu {
    height: auto;
}

Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

Cheers!
Yigit

Hi renske!

Please edit your homepage and then save your color section element on the top of your content as a template by clicking this button – http://i.imgur.com/vTKYlsJ.png. Then edit your other pages and load that color section element under templates and choose to display transparent header on your pages :)

Cheers!
Yigit

• This reply was modified 9 years, 5 months ago by Yigit.

Hi,

As i mentioned, that is because it is inside a media query and being applied on screens smaller than 767px.
Please change your code to following one

@media only screen and (max-width: 767px) {
.responsive .logo { display: none !important; }
}
/* div .main_color .tabcontainer .active_tab_content { background-color: #0694D2; }
*/

div .main_color .tabcontainer .active_tab { background-color: #EF7F1B; color: white;}

/* START – remove arrows to previous and next gallery */
#top .avia-post-nav { display: none; }
/* END */

/* start – position and thickness line under main menu */
.avia-menu-fx { bottom: 10px; }
.avia-menu-fx {
height: 3px;
width:74%;
left:13%;
}
/* END */

#advanced_menu_toggle, #advanced_menu_hide {
margin-top: 10px;
}

#header_main {
min-height: 82px;
}

Best regards,
Yigit