Hi,

Sorry for the delay. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

@media only screen and (max-width: 479px) {
.responsive #top #main .products.slide-entry-wrap .product {
    margin: 0 20px 20px 0!important;
    width: calc(50% - 20px)!important;
}}

Best regards,
Vinay

• This reply was modified 8 years, 10 months ago by Vinay.

Hi,

I checked your site and the header background looks the same on desktop and mobile version. Please check the attached screenshot in private. If you still have any issue please upload a screenshot/mockup to imgur.com and share the link here so we can help you better :)

Best regards,
Vinay

Hi,

Try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:1024px) {
  #top #main .sidebar {
    border: none !important;
  }

  #top #main .sidebar .inner_sidebar {
    margin-left: 0 !important;
  }
}

Hope this helps :)

Best regards,
Nikko

Hi,

Thanks for providing the login, I have added this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width: 1024px) {
  .responsive #top #wrap_all #header {
    position: relative;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: 1;
  }

  .responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
  }

  .responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 80%;
  }

  .responsive .logo a {
    display: table-cell;
    vertical-align: middle;
  }

  .responsive .logo img {
    height: auto !important;
    width: auto;
    max-width: 100%;
    margin: 0;
    display: block;
    max-height: 80px;
  }

  .responsive #header_main .inner-container, 
  .responsive .main_menu {
    position: static;
  }

  .main_menu .avia-menu, #header_main_alternate, 
  .fallback_menu {
    display: none;
  }

  .responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
  }

  .container #advanced_menu_toggle, 
  #advanced_menu_hide {
    display: block;
  }

  .responsive.html_header_sidebar #top #header .social_bookmarks {
    display: none;
  }
}

Let us know if it’s good :)

Best regards,
Nikko

Hi,

Try adding this css code in Quick CSS (located in Enfold > General Styling):

#top .inner_product_header {
    height: 120px;
}

Just adjust the height as you see fit. Hope this helps.

Best regards,
Nikko

Hi,

Can you try to add this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:767px) {
  #top .no_margin.av_one_half,
  .responsive #top .flex_column_table_cell {
    width: 100%;
  }
  
  #top .flex_column.av_one_fifth {
    width: 100%;
    margin-left: 0;
  }
}

Let us know if this helps you with the mobile issue.

Best regards,
Nikko

Hey!

Please do not ” bump ” because it is actually going to the end and not staying at the top.
Can you provide us backend access so we can see how you added?

Thanks a lot

Best regards,
Basilis

Hi!

#top #avia-menu > li > a:hover {
background: transparent !important;
text-decoration: underline;
color: blue;
}

Where color: blue, change it with the color you have selected.
Let us know if it works

Cheers!
Basilis

Hey fash,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

#top .av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg{opacity: .5 !important; }

Best regards,
Vinay

Hey erwin_m!

When I added z-index: 999; on debugger it worked and moved it ontop of slider.
Maybe it is based on the value you added?

Cheers!
Basilis

Hey wilsongrant,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

.logo img {
    padding-top: 20px!important;
}

Best regards,
Vinay

Hey Wisith,

You can edit the font styles from the theme options Enfold > Advanced Styling > Select the font you like to edit from the drop down list.

Please note this will change the font style for content only but the changes are applied site wide.

If you like to add your own custom font via css to a single page try this method https://kriesi.at/support/topic/own-custom-font/#post-733898

Let us know if you have any questions.

Best regards,
Vinay

Hey AnineOlsen,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

#top #header_meta .phone-info {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}

Best regards,
Vinay