Hey blaircomm1,

Thank you for the inquiry.

Are you referring to the Portfolio AJAX preview shown in the following demo?

// https://kriesi.at/themes/enfold/portfolio/portfolio-ajax/

You can adjust the preview containers (image, content) and make them fullwidth using this css code.

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

  /* Add your Mobile Styles here */
  .responsive .portfolio-preview-image, .responsive .portfolio-preview-content {
    display: block;
    width: 100%;
    border-right: none;
  }

  .responsive .ajax_slide .av_table_col {
    display: block;
    padding: 30px;
  }
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hey emilconsor,

Thank you for the inquiry.

Did you add any elements after the last section or before the footer page? Please provide the login details in the private field so that we can check and edit the pages.

Best regards,
Ismael

Hey casadives,

Thank you for the inquiry.

There is an available filter that we can use to add more options to the social icon element. Please check the following documentation for more info about the said filter.

// https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options

These threads should also help.

// https://kriesi.at/support/topic/tiktok-in-social-media/#post-1189115
// https://kriesi.at/support/topic/adding-tiktok-for-social-profiles-the-correct-way/#post-1353254

Best regards,
Ismael

Hi,

You are very welcome! Glad we could be of help. Please feel free to open another thread if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael

Hey Ryan,

Thank you for the inquiry.

Looks like the iframe content is from a different domain. You will not be able to adjust the style of the elements inside that iframe unless the content is located in the same domain as the parent page. Do you have access to the ottooptics.io site?

Best regards,
Ismael

Hi,

Thank you for the update.

Are you saying that the first column, across the entire site, has that ID

No, just the column containing the special heading element inside the first color section, each element has their own unique ID (uid).

/* Add your Mobile Styles here */ , how do I use that code, how would the final css code look like? like below?

This is just a css comment which can be removed as you like. The final css code for an element with the customheader class name would look something like this.

@media only screen and (max-width: 989px) {
  .responsive #top .customheader {
    padding: 20px !important;
    margin-top: -115px !important;
  }
}

I’m getting the impression that I need to identify the unique ID for all first columns

Yes, you have to apply the same custom css class name (customheader) to every column in which the above style has to be applied.

Or do I need to define CSS rules for A. the largerst screen size and B. the other 3 sizes?

The css media query (max-width: 989px) that we defined above should handle screens not wider than 989px, all styles in that css media query will be applied when the screen width is equal or less than 989px (mobile phones, tablets, smaller laptops). Please check this article for more info about css media queries.

// https://css-tricks.com/a-complete-guide-to-css-media-queries/

Best regards,
Ismael

Hey casadives,

Thank you for the inquiry.

The open graph (og) data are not available by default, you have to install a plugin like Yoast or other SEO plugins in order to add these info. Please check the article and the plugin links below.

// https://yoast.com/help/getting-open-graph-for-your-articles/
// https://wordpress.org/plugins/opengraph/
// https://wordpress.org/plugins/og-tags/

Best regards,
Ismael

Hey!

Thank you for the info.

We installed and activated the plugin, and edited the slideshow.js file. It seems to be working correctly, the buttons in the permanent caption are now accessible. Please make sure to purge the cache before testing the page.

Best regards,
Ismael

Hey navindesigns,

Thank you for the inquiry.

1.) Try to wrap the button shortcode inside a paragraph tag to move it to a new line or add a br tag before the shortcode.

<p >[shortcode]</ p>

2.) To align the buttons to the right on mobile view, please use this css code.

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

  /* Add your Mobile Styles here */
  .avia-caption-content .avia-buttonrow-wrap .avia-button {
    float: right;
  }
}

Best regards,
Ismael

Hey Jason,

Thank you for the inquiry.

Are you trying to import another demo? Which one? You might be already aware of this but please note that importing another demo will override the current theme settings. If you would like to continue, please enable WordPress debugging and the error logs so that we can see more info about error.

// https://wordpress.org/support/article/debugging-in-wordpress/#wp_debug

Best regards,
Ismael

Hi,

You have to toggle or temporarily disable the CSS/Javascript File Merging And Compression settings, and only enable them back once you are completely done editing the site.

To always display the caption title not just on hover, make sure to set the slider’s Content > Caption > Slide Title to the first option (yes – display everywhere). The css code that we suggested previously should adjust the width of the title overlay where the title or caption sits.

Best regards,
Ismael

Hey!

The new icons fonts that are displayed in your screenshot are not included in the zip file. Please check the font icons by opening the alter-gasthof-icons > font > flaticon.html file. You will see that there are only 15 icons in the group as opposed to your screenshots with 24 icons.

Please make sure that the new icon fonts are selected or are included in the collection before downloading the zip file from flaticon.

Thank you for your patience.

Cheers!
Ismael

Hey J,

Thank you for the inquiry.

We can add this code in the Quick CSS field or in the child theme’s style.css file to adjust the style of the milestone title and date or step element.

.avia-timeline-vertical li .av-milestone-title {
    font-family: arial;
}

.avia-timeline-vertical li .av-milestone-date {
    font-family: arial;
}

This will set the font-family to arial, adjust as you wish. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adjusting the css.

Best regards,
Ismael

Hey paulozzello,

Thank you for the inquiry.

We could use this css code to adjust the width and height of the lightbox container.

#top .mfp-wrap {
    height: 90% !important;
}

#top .mfp-image-holder .mfp-content {
    max-width: 90% !important;
}

Please note that the actual size of the lightbox container will still depend on the actual dimension and aspect ratio of the uploaded images.

Best regards,
Ismael

Hi,

Thank you for the update.

but this is a workaround, I think that searchform.php should be written in a way that it doesn’t throw a fatal error

There is nothing wrong with the template file, it is written based on the default searcform.php file with a few minor additions such as the icon font. The issue occurs because the security plugin cannot detect the av_icon_char function, which is defined in the enfold/config-templatebuilder/avia-template-builder/php/class-font-manager.php file.

Unfortunately, we are not sure if the plugin loads the whole theme first or check for dependencies before checking the template files. You may need to exclude the searchform.php file from the scan to avoid the error report.

Best regards,
Ismael