Header widget margins help follow up

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,

Thank you for the update.

Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,
Try adding this css:

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

ensure that you clear your phone cache before testing, if this doesn’t help please include your phone screen resolution for portrait and landscape.

Best regards,
Mike

Hi,
Try finding this css that you added:

.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: 30%;
    min-width: 100px;
    max-width: 180px;
    z-index: 9;
}

and change the max-width to suit, such as 250px like this:

.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: 30%;
    min-width: 100px;
    max-width: 250px;
    z-index: 9;
}

but note that the larger the logo is the more it will push down the menu, please see the screenshot in the Private Content area that displays the flex grid for the header to help explain.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike