Hi,

Thank you for the update.

Please remove the previous modifications and replace them with the following code:

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  #top .grid-entry.no_margin.av_one_third {
    padding: 10px;
  }

  .grid-sort-container {
    width: calc(100% + 10px);
    margin-left: -10px;
  }
}

This should ensure that the padding is only applied on on larger screens.

Best regards,
Ismael

Hi,

The update to 6.0.2 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Thanks @guenni007 for helping out.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
Try adding:

#top .av-tab-arrow-container {
    height: 11px;
}

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey laptophobo,

Thank you for the inquiry.

That is quite odd. We can’t find where the mask is coming from. Have you tried recreating the slider from scratch?

Best regards,
Ismael

Hey Richard,

Thank you for the inquiry.

Unfortunately, this is not possible because the positions of the portfolio grid items are calculated dynamically with a script. You can apply padding around the items to create space between them, but this will also affect the alignment of the grid container. If you want to test it, you can try this css code:

#top .grid-entry.no_margin.av_one_third {
    padding: 10px;
}

Best regards,
Ismael

Hi,
Try adding this:

#top .av-tab-arrow-container {
    top: -11px;
}

Best regards,
Mike

Hi,
please compare this to the original:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
padding-left: 15px !important;
padding-right: 15px !important;
}
.responsive #top .av-masonry {
background-color: #f5f0eb !important;
}
}

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-tab-no-icon.av-tab-no-image .av-inner-tab-title {
    margin-bottom: 0;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the update.

How do you add the site? Please provide a short clip of the steps or a screenshot of the error. Did you follow these steps?

// https://support.google.com/business/answer/2911778?hl=en&co=GENIE.Platform%3DDesktop
// https://support.google.com/business/answer/7107242?sjid=3599139721803492600-AP

Best regards,
Ismael

Hi,
Try adding !important; after background-color: #f5f0eb; like this:

@media only screen and (max-width: 767px) {
  .responsive #top.page-id-21 #wrap_all .av-flex-cells .no_margin {
      padding-left: 15px !important;
      padding-right: 15px !important;
  }
  .responsive #top.page-id-21 .av-masonry {
    background-color: #f5f0eb !important;
}
}

Best regards,
Mike

Hey Richard,
This is margin due to this css:

p+h1, p+h2, p+h3, p+h4, p+h5, p+h6 {
    margin-top: 1.5em;
}

the “p” means paragraph, so in your case please add this css:

h3+h4 {
    margin-top: 1.5em;
}

Best regards,
Mike

Hi,
On mobile I see #f5f0eb;
try clear your browser cache.
If you mean desktop add this css:

 #top.page-id-21 .av-masonry {
    background-color: #f5f0eb;
}

Best regards,
Mike

Hi,
Please use margin like this:

#top .social_bookmarks li {
    margin-right: 10px;
}

Best regards,
Mike

Hi,
To match the masonry on /photography/iraq/ width with homepage width on mobile please use this css instead:

@media only screen and (max-width: 767px) {
  .responsive #top.page-id-21 #wrap_all .av-flex-cells .no_margin {
      padding-left: 15px !important;
      padding-right: 15px !important;
  }
  #top.page-id-21 .av-masonry {
    background-color: #f5f0eb;
}
}

This will also match the background color.

Best regards,
Mike

Hi,
To remove most of the padding for that masonry on that page on mobile, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
    .responsive #top.page-id-21 #wrap_all .av-flex-cells .no_margin {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

there will still be a little padding but this is needed for the element, please see the screenshots in the Private Content area of the expected results.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead to have larger round social icons in the socket, it also adds a white background color before mouse-over and on mouse-over the icon colors show, I have not sure what color you wanted as typically there is no color until mouse-over, feel free to adjust the color to suit.

#socket .social_bookmarks li a {
width: 50px!important; 
line-height: 50px!important; 
min-height: 50px!important; 
font-size: 30px;
}

#socket .social_bookmarks li {
height: 50px!important; 
width: 50px!important; 
}

#top #wrap_all .av-social-link-instagram a {
    color: var(--enfold-socket-color-meta);
    background-color: #fff;
}
#top #wrap_all .av-social-link-linkedin a {
    color: var(--enfold-socket-color-meta);
    background-color: #fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike