Hey cuccarini,
Thank you for the link to your site and your screenshot, you are using the pricing table on your site, try using the tabular data instead.
I created a test page with the tabular data and I made the table background color transparent so the color section Background Gradient would show instead of filling the empty cells with a red background color. This is how I filled the table:

I then added the custom class club-table

Then I used this css:

.main_color table.club-table {
    border-collapse: separate;
    border-spacing: 10px;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.main_color table.club-table td,
.main_color table.club-table th {
	border: 2px solid #fff;
    padding: 5px;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    height: 120px;
    vertical-align: middle;
    text-align: center;
}
.main_color table.club-table tr {
    border: 2px solid #fff;
    background: transparent;
}
tr:first-child th, tr:first-child td,
tr th:first-child, tr td:first-child {
	border: 2px solid #fff;
}
table.club-table > tbody > tr:nth-child(2) > td:nth-child(1),
table.club-table > tbody > tr:nth-child(3) > td:nth-child(1) {
	background-color: #1e90ff;
}
table.club-table > tbody > tr:nth-child(3) > td:nth-child(2) {
	background-color: #808080;
}
table.club-table > tbody > tr:nth-child(2) > td:nth-child(3) {
	background-color: #808080;
}
table.club-table > tbody > tr:nth-child(3) > td:nth-child(3) {
	background-color: #ee711f;
}
table.club-table > tbody > tr:nth-child(3) > td:nth-child(5) {
	background-color: #29a715;
}

This is the result:

Please give this a try.

Best regards,
Mike

Hey marco593,
Thank you for your patience, the following javascript will add the chart title to the center of the Doughnut Chart,

If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function doughnut_chart_with_title_in_center() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    function waitForChartJs() {
        if (typeof Chart === 'undefined') {
            setTimeout(waitForChartJs, 50);
        } else {
            registerCenterTitlePlugin();
        }
    }

    function registerCenterTitlePlugin() {
        Chart.register({
            id: 'centerTitle',
            beforeInit: function(chart) {
                // Dynamically hide the title and legend
                const options = chart.options;
                if (options.plugins) {
                    if (!options.plugins.title) {
                        options.plugins.title = {};
                    }
                    options.plugins.title.display = false; // Hide title

                    if (!options.plugins.legend) {
                        options.plugins.legend = {};
                    }
                    options.plugins.legend.display = false; // Hide legend
                }
            },
            afterDraw: function(chart) {
                if (chart.config.type === 'doughnut') {
                    const ctx = chart.ctx;
                    const width = chart.width;
                    const height = chart.height;
                    const fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";
                    ctx.textAlign = "center";

                    // Use existing title if set, otherwise use a default text
                    const text = chart.options.plugins.title.text || 'Your Title Here';
                    const textX = width / 2;
                    const textY = height / 2;

                    ctx.fillText(text, textX, textY);
                }
            }
        });
    }

    waitForChartJs();
});
</script>
  <?php
}
add_action( 'wp_footer', 'doughnut_chart_with_title_in_center', 99 );

This is the result:

Best regards,
Mike

Hi,

Add this css code to adjust the layout of the tag pages:

#top.tag .no_margin.av_one_third {
  float: none;
  margin-right: 2%;
  width: 31%;
  margin-bottom: 2%;
}

#top.tag .grid-sort-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#top.tag .grid-entry-title.entry-title {
  font-size: 1.2em;
  padding: 10px 13px;
}

Then add this code in the functions.php file to adjust the image thumbnail:

add_filter("avf_post_slider_args", function($atts, $context) {
  if( $context == "tag" ) {
    $atts['type']  = 'grid'; 
    $atts['preview_mode'] = 'custom';
    $atts['image_size'] = 'full';
  }
  return $atts;
}, 10, 2);

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

Hey Christy,

Thank you for the inquiry.

You can add this css code to adjust the position of the arrow inside the box:

#top #wrap_all .avia-slideshow-button, #top .avia-button, .html_elegant-blog .more-link, .avia-slideshow-arrows a:before {
    border-radius: 5px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 0;
    padding-bottom: 15px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Have you tried adjusting the value of the padding and font size properties to make the pills smaller?

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

  /* Add your Mobile Styles here */
  #top .av-pill-tabs .av-section-tab-title {
    margin-right: 10px;
    padding: 0 !important;
  }

  .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.7em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 4px !important;
  }
}

Best regards,
Ismael

Hi,
To change the color of the widget title for both pages try this css:

#top #wrap_all .all_colors .widgettitle,
#top #custom_html-2 > h3.widgettitle {
	  color: #000000;
    text-transform: none;
    font-size: 23px;
    font-weight: 200;
}

to show the footer on tablet you need to change the css to show for tablet, we will say it is 768px, so use this:

@media only screen and (min-width: 768px) {
#top:not(.page-id-3288,.page-id-3593) #footer {
display: none;
}
}
@media only screen and (max-width: 767px) {
#top #footer {
display: none;
}
}

some tablets are different sizes like 1024px & 1366px, but 768px should cover all of them.

Best regards,
Mike

Hi,

Thank you for the inquiry.

– I would like to have a space between the buttons and the message bar.
– Also, a slight shadow above the entire cookie-bar would be nice
– and a slightly larger font only in the mobile version

You can add this css code to adjust the style of the consent box based on your description above.

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

  /* Add your Mobile Styles here */
  .responsive #top .avia_cookie_text {
    margin-bottom: 10px;
  }

  .responsive #top .avia-cookie-consent p {
    font-size: 14px;
    line-height: 1.2em;
  }

  .avia-cookie-consent a.avia_cookie_infolink,
  .avia-cookie-consent p,
  .avia-cookie-consent .avia-cookie-consent-button {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    letter-spacing: 0.05em;
  }

  .avia-cookie-consent {
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1)
  }
}

Best regards,
Ismael

Hi,
When I check your page on desktop the css I posted above is not applied, and this is what makes the button larger and center, so I don’t know if you have an error in your css, or if you didn’t add it because you didn’t understand, but this is the desktop part of the css that you should ensure to use:

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}

this is the result:

I now assume that you now wanted the button to move up a little, so you would then add this css:

@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -100px;
}
}

for this result:

feel free to adjust to suit.

Best regards,
Mike

Hey Yaphoon,

Thank you for the inquiry.

On the category page, items are displayed using the Portfolio Grid element, while the Masonry element is used on the Product page, which is they don’t look the same. If you want to adjust the style of the Portfolio Grid to make it look more like the Masonry element, try adding this css code:

#top.tax-portfolio_entries .no_margin.av_one_third {
    float: none;
    margin-right: 2%;
    width: 31%;
    margin-bottom: 2%;
}

#top.tax-portfolio_entries .grid-sort-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#top .grid-entry-title.entry-title {
    font-size: 1.2em;
    padding: 10px 13px;
}

Best regards,
Ismael

Hi,
Your header is transparent the gray that you see is from the top color section on the page:

when the header is scrolled the #897270 color is from your Logo Area Color:

if you don’t want a transparent header change the setting on the page in the backend in the admin sidebar:

As for the header widget, I disabled the above css and added this:

@media only screen and (min-width: 990px) and (max-width: 1670px) { 
	#header_main .inner-container .widget .textwidget {
  	 margin-left: -196%;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1440px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 14px !important;
  }
}
@media only screen and (min-width: 1441px) and (max-width: 1670px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 18px !important;
  }
}
  #header_main .inner-container {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  align-content: center;
  }
  #header_main .inner-container .widget {
  	padding: 0;
  }
  #header_main .inner-container .widget .textwidget {
    align-content: center;
    height: 100%;
  }

please clear your browser cache and check.

Best regards,
Mike

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

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
@media only screen and (max-width: 767px) { 
	#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
	padding: 10px 6px;
	font-size: 10px;
}
}

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

Best regards,
Mike

Hi,
Then remove the other css and use this instead:

.single-portfolio #av-masonry-1 h3.av-masonry-entry-title {
	font-family: verdana;
	font-size: 16px;
	font-weight: 400;
	
}

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

Best regards,
Mike

Hey Yaphoon,
For your first two questions, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.main_color a.more-link:hover {
	color: #470024;
}
.main_color .sidebar a:hover {
	color: #e94a3f;
}

For your last question, try this css:

.single-portfolio h3.av-special-heading-tag {
	font-family: verdana;
	font-size: 16px;
	font-weight: 400;
	
}

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

Best regards,
Mike

Hey ipressen,
Thank you for your patience, to create a pricing table like this:

add these icon shortcodes into the table:

[av_font_icon icon='ue812' font='entypo-fontello' size='40px' position='center' color='green'][/av_font_icon]
[av_font_icon icon='ue819' font='entypo-fontello' size='40px' position='center' color='red'][/av_font_icon]

the top one is a checkmark, and the other is a minus.
This is how the backend looks:

I recommend showing the empty cells, otherwise the rows will move out of place:

Then this is the css I used in the Quick CSS to make the text black and make all of the cells the same height so they would line up and to “hide” the empty cells:

.pricing-table > li {
	font-size: 20px;
  line-height: 48px;
}
.main_color .pricing-table > li:not(.avia-heading-row,.avia-pricing-row) {
	color: #000;
}
.pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row {
	opacity: 0;
}
.pricing-table-wrap:nth-child(1) .pricing-table li.avia-pricing-row {
	opacity: 0;
}

Best regards,
Mike

Hi,

1.) We recommend increasing the font size slightly from the default of 14px. Perhaps 16px or 18px would be ideal, but the choice depends on your preference.

2.) Would you mind providing a screenshot? You can use platforms like Savvyify, Imgur or Dropbox.

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

Hey Renard,

Thank you for the inquiry.

You can add this css code to adjust the size of the tabs and make sure they align properly on smaller screens:

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

  /* Add your Mobile Styles here */
  #top .av-pill-tabs .av-section-tab-title {
    margin-right: 10px;
    padding: 0 !important;
  }

  .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.9em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 8px !important;
  }
}

Best regards,
Ismael

Hey woogie07,

Thank you for the inquiry.

You can add this css code to adjust the style of the slider button:

#top .avia-slideshow-button {
    border-radius: 3px;
    text-transform: uppercase;
    padding: 15px 16px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
}

Best regards,
Ismael

Hi,

The Styling > Font Sizes settings can be found in each slider item of the Full Width Slider element. Please let us know if you need further assistance.

Best regards,
Ismael

Hi,

Thank you for the update.

The images are resizing correctly when we checked the site on smaller screens, but the size of the captions is a little too large for the slider. You can adjust the Caption Title Font Size and Caption Content Font Size for different screen sizes in the Styling > Font Sizes toggle.

Best regards,
Ismael