This is my code in a text block. I must be doing something wrong with the link. It doesn’t work

[av_button label='Jealousy-Letter abonnieren' icon_select='yes-right-icon' icon='ue875' font='entypo-fontello' icon_hover='aviaTBaviaTBicon_hover' link='manually,#test-popup' class='open-popup-link' link_target='' size='x-large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color-highlight' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='solid' border_width='2' border_width_sync='true' border_color='#000000' border_radius='10' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']
<div id="test-popup" class="white-popup mfp-hide">[av_mailchimp list='eifersuchtscoach' double_opt_in='true' on_send='' sent='Thank you for subscribing to our newsletter!' link='' color='' hide_labels='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' alb_description='' id='' custom_class='' template_class='' av_uid='av-8l32o' sc_version='1.0'][/av_mailchimp]</div>

Thank you, this works.

And the size of the font plaese?

Following upon this. Yes, I am currently at 5.7.1. WordPress: 6.5.3, and PHP: 8.2.19

`
### wp-core ###

version: 6.5.3
site_language: en_US
user_language: en_US
timezone: America/Chicago
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 3
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /srv/users/preucil/apps/preucil/public
wordpress_size: 54.88 MB (57541435 bytes)
uploads_path: /srv/users/preucil/apps/preucil/public/wp-content/uploads
uploads_size: 103.51 MB (108533120 bytes)
themes_path: /srv/users/preucil/apps/preucil/public/wp-content/themes
themes_size: 72.76 MB (76294269 bytes)
plugins_path: /srv/users/preucil/apps/preucil/public/wp-content/plugins
plugins_size: 103.19 MB (108205684 bytes)
database_size: 38.44 MB (40304640 bytes)
total_size: 372.77 MB (390879148 bytes)

### wp-active-theme ###

name: Enfold Child (enfold-child)
version: 1.0
author: Kriesi
author_website: http://kriesi.at
parent_theme: Enfold (enfold)
theme_features: core-block-patterns, avia_exclude_bbPress, avia_exclude_menu_exchange, avia_exclude_pojo_accessibility, avia_exclude_wp_accessibility, avia_exclude_relevanssi, avia_exclude_WooCommerce, avia_exclude_wpml, avia_exclude_instagram_feed, avia_exclude_leaflet_map, avia_mega_menu, avia_improved_backend_style, avia_option_pages_toggles, avia_sidebar_manager, automatic-feed-links, nav_menus, menus, widgets, post-formats, avia_post_meta_compat, force-post-thumbnails-in-widget, post-thumbnails, widgets-block-editor, block-templates, title-tag, editor-styles, editor-style, customize-selective-refresh-widgets, responsive-embeds, editor-color-palette, editor-font-sizes, avia_no_session_support
theme_path: /srv/users/preucil/apps/preucil/public/wp-content/themes/enfold-child
auto_update: Disabled

### wp-parent-theme ###

name: Enfold (enfold)
version: 5.7.1
author: Kriesi
author_website: https://kriesi.at
theme_path: /srv/users/preucil/apps/preucil/public/wp-content/themes/enfold
auto_update: Disabled

• This reply was modified 1 year, 10 months ago by billbasler.

Hi Mike.

Ok, I have up with Gutenberg and recreated the pricing page with avia advanced. layout builder.

you can find the link in private content.

I’ve managed to adjust the pricing table mostly to what I need. One remaining question.

How can I keep the pricing table to the 3 main breakpoints (laptop tablet phone) as the standard @media sizes in enfold. so that the column width doesn’t dynamically change as the browser width is reduced?

ideally
browser – all 3 columns 1 row – fixed width with a space between each column
tablet – all 3 columns 1 row fixed width, with a space between columns
phone – wrapped 1 column, 3 rows

Chatgpt 4o has gotten me so far but not all the way.

/* Pricing rows tables pricing page */
#top .pricing-table li.avia-pricing-row {
border: none;
border-radius: 20px 20px 0 0; /* Rounded top corners */
}

.avia-pricing-table-container .pricing-table > li:last-child {
border-bottom-left-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}

#top .pricing-table .avia-table tr {
background-color: #ffffff !important;
border: none !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add drop shadow */
}

/* Align text to the left in all columns of the pricing table except heading and pricing rows */
.pricing-table-wrap li:not(.avia-heading-row):not(.avia-pricing-row) {
text-align: left;
font-size: 16px; /* Set font size */
background-color: #ffffff !important; /* Force white background */
padding-left: 20px; /* Add left padding */
}
<<<————————————————>>>
This is the bit that is supposed to fix the width of the columns

/* Container for the pricing table */
.pricing-table-wrap {
display: flex;
flex-wrap: wrap; /* Allow columns to wrap */
width: 100%; /* Full width container */
}

/* Each column in the pricing table */
.pricing-table-wrap > ul {
list-style: none; /* Remove default list styling */
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
flex: 0 0 400px; /* Set fixed width for each column */
box-sizing: border-box; /* Include padding and border in width */
}

/* Media query for screens between 768px and 989px */
@media (max-width: 989px) {
.pricing-table-wrap > ul {
flex: 0 0 50%; /* Each column takes 50% width */
max-width: 50%;
}
}

/* Media query for screens below 768px */
@media (max-width: 768px) {
.pricing-table-wrap > ul {
flex: 0 0 100%; /* Each column takes 100% width */
max-width: 100%;
}
}

Can you help fix the width of the 3 columns to the 3 breakpoints.

Tks!

• This reply was modified 1 year, 10 months ago by Jambar.

Thank you!

1 – I’m looking for vertically centred icon to content text. Changing to ‘display icon above title’ horizontally centres them instead.

2 – The Styling > Font Sizes panel has two font sizing options: title text and content text. There is no icon size option.

3 – Great info, thanks.

Hi,
So… this is not where I would create a template (even if it literally says “template”) because there seems no way to simply make a copy of the standard-template that already has everything configurated the way we want it?

Did not work with “img”-Button to put it in the post, so here’s the link to the images

I thought if I add all the elements to the template it will be available in every template. But it seems, that “template” isn’t a template after all *hahahah*. I did not work with the Avia Layout Architect yet, because I haven’t found out, why the whole layout looks completely different (no title, no category, different font size, no author…..)

Did not work with “IMG”-Button to put it in the post, so here’s the link to the images

Where do I find the settings to make it appear the same as with Standard Editor (especially show Title, author, date etc…?)

• This reply was modified 1 year, 10 months ago by szenemagazin.
• This reply was modified 1 year, 10 months ago by szenemagazin.

Hey Rikard,

sorry I change the page, so it’s not working anymore. Sending you the new link. :)
I would like to have the category grid a bit smaller. Not big 4 columns, but for example 5 columns with smaller pictures, so it is aligned with the product grid below.
As the category list is inserted via the code block, there is no possibility in the theme to set the characteristic for the product categories grid. :)
So my question is if there is any way to adjust for example the size, the number of columns, size of the font..

Thank you
Martina

I would normally say I could probably figure the CSS out but because 6.5.2 has swapped around the order of ‘form’ and ‘phone-info’ in the HTML, and the “id=searchform” line is now outside of the phone-info div, the phone-info CSS definition is not working as it should.

This is the default from layout.css

.phone-info {
    float: left; - overridden by your float:right directive above
    font-weight: bold;
    line-height: 20px;
    font-size: 11px;
    padding: 5px 0;
}

If I change the first padding parameter, then white space around the box does not appear until a setting of “12px 0” and then space is only added beneath the search box, not above. If I increase it further just to test, say “25px 0”, then again no padding is added above.

So please can you have a look at what is going on and advise which CSS elements I now need to target to get control back of the box, e.g. how to get padding to appear above and below the box?