Hey tonyiatridis,

Thanks for reaching out.

Please try this css code to adjust the font color of the sorting buttons:

#main .main_color #js_sort_items a, #top .main_color #js_sort_items a.active_sort {
    color: #ffffff;
}

#main .main_color #js_sort_items a:hover {
    color: #bbe2ff;
}

.main_color .text-sep {
    color: #e1e1e1;
}

Example:

View post on imgur.com

Best regards,
Ismael

Hi,

You can try this css code to adjust the top spacing of any text block element next to a code block.

.avia_codeblock_section + .av_textblock_section {
    padding-top: 50px;
}

Best regards,
Ismael

Hey navindesigns,

Thank you for the inquiry.

1.) You can adjust the Min. Mobile Font Size in the Style > Text & Typography panel, as shown in the screenshot below. You can apply a custom css class in the Attributes tab and control the font size using custom css.

View post on imgur.com

2.) Please try this css code to adjust the width and position of the SVG wave separator.

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

  /* Add your Mobile Styles here */
  .avia-section.av-wxcp-c90200cb46284bf3caa8c1c1fbba7cb6 .avia-divider-svg-top svg {
    height: 50px;
    width: calc(100% + 300px);
    left: 20%;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,
The ID “#after_section_1” is now missing, perhaps you updated the page? So I added the ID “#add_50_px_pading” to the element:

and this css:

.page-id-4128 #add_50_px_pading  {
         padding-top: 50px;
}

Now it is working, please clear your browser cache and check.

Best regards,
Mike

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

.page-id-4128 #after_section_1 {
	 padding-top: 50px;
}

adjust to suit.

Best regards,
Mike

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

#top #main .avia-gallery.av-mb6m8z6a-b9f99ac9fd31fe48d94c453aabd891f1 .avia-gallery-thumb a {
    width: 50%;
}

Then disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files
Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
#top .avia-gallery.av-mb6m8z6a-b9f99ac9fd31fe48d94c453aabd891f1 .avia-gallery-thumb a {
  width: 50%;
}
}

Best regards,
Rikard

Hi,

Thank you for the update.

To hide the post tags, you can add this code in the Quick CSS field or the style.css file:

#top #wrap_all .slide-meta-tags {
    display: none;
}

Let us know the result.

Best regards,
Ismael

Hey Sebastian,

Thank you for the inquiry.

Apply a Custom CSS Class name (e.g “avia-custom-gallery”) to the Gallery element in the Advanced > Developer Settings panel, then add this css code to adjust the width of the items on mobile view.

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

  /* Add your Mobile Styles here */
  #top .avia-custom-gallery .avia-gallery-thumb a {
    width: 25%;
  }
}

Best regards,
Ismael

Hey guylene1,

I see that you are running an old version of the theme, could you try to update to the latest version (7.1.1) to see if that helps please? The update to 7.1.1 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/

Best regards,
Rikard

Hi,

Thank you for the update.

and when I set it to “scale to fit”, it doesn’t show on mobile.

The background is set to “scale to fit” and it’s still visible on smaller screens when we checked. If the issue still occurs on your end, try to duplicate the section, adjust the background size settings, one using “scale to fit” and the other “stretch to fit”, then toggle the sections’ visibility for different sizes using the Advanced > Responsive > Element Visibility options.

View post on imgur.com

You can also add this css code to manually adjust the background size to “cover” or “stretch to fit” on smaller screens:

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

  /* Add your Mobile Styles here */
  #top #wrap_all .flex_cell.av-m7hqe6b7-0a95c68b280818d6da5bb44681988588 {
    background-size: cover !important;
  }
}

Best regards,
Ismael

Hi,

We can’t reproduce the issue with the section backgrounds. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot.

View post on imgur.com

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael