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

Hey Katja,
Thank you for the link to your site, on your first level menu items they are blue until mouse-over then they are yellow, but the backend of the second level is already yellow so what colors do you want the mouse-over and active page second level menu items to be?
mobile devices don’t have a mouse-over function, if you want the first level active menu items to have a yellow background you could try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all #av-burger-menu-ul li.current-menu-item a {
    background-color: #fff236;
}

but second level mobile menu items all share the same background color.
To add the header image to your category pages try the Unique Headers plugin.
For your search field try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .header_color .avia-search-tooltip input[type='text']#s {
	background-color: #fff;
	color: #30302f;
}

Fot your widget item, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .main_color .tribe-events-widget-events-list__header-title {
    color: #c3512f;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}
#top .main_color .tribe-events-widget-events-list__header-title {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(235, 232, 226);
    padding: 10px 0;
    border-left: none;
    border-right: none;
    margin-bottom: 15px;
}

For your last question, some items have text some don’t they are not the same.
Please note that we kindly ask that each thread is for a single topic, it is hard to manage threads with many questions, typically it causes confusion when other Mods try to help or when clients answer but are not so clear, Thank you for your patience and understanding and for using Enfold.

Best regards,
Mike

Hey Jason,
Thanks for your patience, the blog element layout is dependent on the Enfold Theme Options ▸ Blog Layout ▸ Blog Styling
it looks like you are using the Modern Business

you also could use Elegant

and Default (Business)

So I recommend choosing the one that is closest to your overall goal, which in this case seems to be Default (Business) and then adjust from there. So in this example it looks like we only need to move the date above the title, I recommend using jQuery in your child theme functions.php instead of customizing the element php file in your child theme, \enfold\config-templatebuilder\avia-shortcodes\postslider\postslider.php, because future features may not work correctly if you use an older version of the file.
For example:

function custom_move_time_script() { ?>
  <script>
(function($){
  $( '.slide-entry' ).each(function() {
  $( this ).find( 'time.slide-meta-time' ).insertBefore( $(this).find('header'));
  });

})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_move_time_script', 99 );

Then you can make the rest of the adjustments with css, like hiding the comments, making the date larger & gold, adding top padding, making the read more gold, etc.

.slide-content .slide-meta {
	display: none;
}
.slide-content .slide-meta-time {
	font-size: 14px;
	color: gold;
}
.slide-content .slide-entry-title {
	font-size: 28px;
	padding-bottom: 10px;
}
.slide-content {
	padding-top: 20px;
}
.slide-content .read-more-link a {
	color: gold;
}

So give this a try and if you need further help please create a test page so we can examine your element and offer more help.

Best regards,
Mike

Hey jmjwebsites,

Thank you for the inquiry.

Are you referring to the links within the socket container? If that’s the case, you can use this css rule to adjust the style of the menu items.

#socket .sub_menu_socket li {
    float: left;
    display: block;
    padding: 0 10px;
    border-left-style: solid;
    border-left-width: 1px;
    line-height: 10px;
    font-size: 18px;
}

For the copyright text, please add this code:

#socket .copyright {
    float: left;
    font-size: 18px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Are you referring to the h3 tags in the Text Block element? The font size of the heading element is set to 30px when we checked the site on Chrome and Safari. Please check the screenshot in the private field.

Best regards,
Ismael

Hey Andrea,

Thank you for the inquiry.

The cells of the table do not respond or resize correctly on mobile view due to the height adjustment in the following css code:

.pricing-table>li {
    border-color: var(--base1-color)!important;
    font-size: 18px!important;
    font-weight: bold!important;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    resize: vertical;
    margin: 0 auto;
}

Please adjust the height property from 100px to auto and make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.

Best regards,
Ismael

Hey LUISCANAL,
Try a back slash before the icon number:

.my-custom-tabs .toggle_icon:before {
    font-family: 'entypo-fontello';
    content: '\e817';
    position: absolute;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    line-height: 0;
    color: red;
}

Best regards,
Mike

Hi,
I see that whenever a page is edited there is a permissions error for core WordPress files:

one is for a plugin “easy pricing” and I see and error that your Rest API has been disabled, so you made have other plugin conflicts.
comparing the wayback page with your current one, I only see the your headings have a color of #666 now and were #222 but the font sizes is the same, and you icon element font was 21px and now 16px. The problem is that the wayback page uses the Autoptimize cache and now you are not, Autoptimize often breaks the cache styles due to multiple minifying, typically people notice the error and the disable Autoptimize to correct, so I’m not sure if you didn’t realize the error until now when Autoptimize has been disabled and the cache cleared.
When I examine your general style you are using the font color #666 so this leads me to believe that this color is correct and the Autoptimize version was wrong.
I recommend disabling the above plugin and any others that are causing the permissions & Rest API errors.

Best regards,
Mike