Hi,
Please remove the css I posted and only use the css Ismael posted.
Stacked on top of each other for mobile is the default behavior.

Best regards,
Mike

Hi,

Great, I’m glad that we could help. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that you both managed to get it working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that you found a solution. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that you found a solution for your problem. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey joandjaxx,

Thank you for the inquiry.

You can’t use another icon font to alter the default shape, but you can apply css to create a different shape for the icon container. To adjust the first icon container to a diamond shape for example, please add this css code.

.iconbox.av-x9jgk-0341356a8a95f9e77745bc47d8dbb48f .iconbox_icon:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

.iconbox.av-x9jgk-0341356a8a95f9e77745bc47d8dbb48f .iconbox_icon {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    box-sizing: content-box;
    position: relative;
    margin: 20px 0 50px 0;
    padding: 0;
    background: transparent;
}

.iconbox.av-x9jgk-0341356a8a95f9e77745bc47d8dbb48f .iconbox_icon:before {
    top: 10px;
    position: relative;
    z-index: 9;
    left: -4px;
}

This is based on: https://css-tricks.com/the-shapes-of-css/

Best regards,
Ismael

Hey solinpaul2,

Thank you for the inquiry.

The transparent and fixed header options are disabled on mobile devices by default. The header will remain static on smaller screens without transparency. We could add a few css modification to re-enable these options, but we don’t recommend it.

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header {
    position: fixed;
  }

  #top #wrap_all .av_header_transparency {
    background-color: transparent;
    color: #333333;
    border-color: #e1e1e1;
  }
}

Best regards,
Ismael

Hey biggsuccess,

Thank you for the inquiry.

We have found an extra curly brace in the css code above, which renders the css rules below it invalid. We also adjusted the position of the css media queries.

.main_menu {
  background: white;
}

#top #header_meta a,
#top #header_meta li,
#top #header_meta .phone-info {
  font-size: 14px;
}

.avia-layerslider {
  box-shadow: none !important;
  border-top-width: 0 !important;
}

div#after_layer_slider_1 {
  border-top: none !important;
}

.home #main>.container_wrap_first>.container>.content {
  padding-bottom: 0;
}

@media only screen and (max-width: 430px) {
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 182px !important;
  }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .responsive #top #wrap_all #main {
    padding-top: 119px !important;
  }
}

@media only screen and (max-width: 768px) {
  .responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
    padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
  }

  .responsive #top #header #header_main .inner-container .widget>div {
    padding: 0;
  }

  .responsive #top #header #header_main .inner-container .widget>div>div {
    text-align: center;
  }
}

Best regards,
Ismael

Hi,
Try this css:

.avia-section.av-rk2b-b60529e4fd7ee3da92077755e7762691 .av-section-color-overlay {
    top: 15%;
}

you may need to adjust for very large screens using media queries, but this seems to work for my screen.

Best regards,
Mike

Hi,
To add space between the letters for the post title, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_elegant-blog #top .post-entry .post-title {
    letter-spacing: 4px;
}

adjust the number to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the clarification.

You should be able to use the following css code to adjust the position of the submenu container.

#top #header.av_header_transparency .avia_mega_div {
    margin-top: 1px;
    padding-top: 1px;
    left: -40px !important;
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

The style issue occurs because of the cell’s padding. To fix the issue, we can override the default padding settings with this css code.

@media only screen and (max-width: 1024px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_cell.av-lnzk99u3-2367dbc24f2a8c0e8958288f6e1097b4 {
    padding: 20px !important;
  }
}

Best regards,
Ismael

Hey John,

Thank you for the inquiry.

We could adjust the default top margin of the columns. We added this code in the Quick CSS field.

body .column-top-margin {
    margin-top: 10px;
}

Best regards,
Ismael

Hey Gianluca,

Thank you for the inquiry.

Background videos are disabled on mobile devices by default, which is why there is a fallback image option. This image will be displayed instead of the background video on smaller screens. Also, please note that autoplay is only allowed for muted videos. Enabling audio by default will disable autoplay.

Best regards,
Ismael

Hi,

I do need to understand what the Enfold Performance settings should now be after those were deleted.

You can keep the default compression settings disabled and install a third-party compression plugin like Autoptimize or use the default compression options from your cache plugin. Re-enabling the default compression settings from the theme will just regenerate the database entries you’ve just deleted.

Best regards,
Ismael