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, 9 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, 9 months ago by szenemagazin.
• This reply was modified 1 year, 9 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?

Thanks, I guess I fixed my css by coping each code one by one back in.
On Desktop everything looks good again.
But the button on the mobile slider just won’t change.
Here is my current full css.

/* Header mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 50px !important;
}
.responsive .logo a {
    vertical-align: top !important;
}
.responsive .logo img {
    max-height: 50px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    top: -15px;
    height: 45px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
}
}
@media only screen and (max-width: 500px) { 
.responsive #top #wrap_all #main {
        padding-top: 50px !important;
    }
}
/* Farbe Nachrichtenversand */
h3.avia-form-success{
 color:#99a502!important;	
}
/* Text mit Foto*/
.avia_textblock p img {
	  border-radius: 100%;
	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
}
.avia_textblock img.alignleft {
  margin-right: 40px;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) { 
#hello .avia_textblock img {
	width: 50%;
}
}
/* ScrollDown Pfeil */
#top .scroll-down-link {
	color: #a47654;
}
/* Blog Leerzeile entfernen */
.page-id-691 #after_section_2 {
  display: none; 
}
/* Blog Postdatum entfernen */
.page-id-691 .av-masonry .av-masonry-date {
  display: none; 
}
/* SocialMedia Icons*/
#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: #c82161;
}
/* Icon Circle schneller*/
.avia_start_animation .avia-icon-circles-inner {
  transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
}
/* Desktop Menu*/
@media only screen and (max-width: 2500px) {
  #top #header.av_header_transparency .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header.av_header_transparency .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}
/* Header Button Desktop*/
@media only screen and (max-width: 450px) { 
.slideshow_inner_caption {
	top: -40px;
}
}
@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: 500px;
    height: 56px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -125px;
}
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
    background-color: #c79a52;
    color: white;
    border-radius: 15px;
}
/* Header Button Mobile*/
@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 250px;
}
.home .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
}

I’m just not looking through in my css anymore. I’m afraid to make it worse
Can you please help me?

/* Header mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: 50px !important;
}
.responsive .logo a {
    vertical-align: top !important;
}
.responsive .logo img {
    max-height: 50px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    top: -15px;
    height: 45px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
}
}
@media only screen and (max-width: 500px) { 
.responsive #top #wrap_all #main {
        padding-top: 50px !important;
    }
}
/* Farbe Nachrichtenversand */
h3.avia-form-success{
 color:#99a502!important;	
}
/* Text mit Foto*/
.avia_textblock p img {
	  border-radius: 100%;
	  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 4px 4px;
}
.avia_textblock img.alignleft {
  margin-right: 40px;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) { 
#hello .avia_textblock img {
	width: 50%;
}
}
/* ScrollDown Pfeil */
#top .scroll-down-link {
	color: #a47654;
}
.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;
}
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
/* SlideShow Button Desktop*/
@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: 500px;
    height: 56px;
    font-size: 22px;
}
@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -125px;
}
}
/* SlideShow Button Mobil */
@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 250px;
}
.home .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
}
/* SocialMedia Icons*/
#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: #c82161;
}
.page-id-691 .av-masonry .av-masonry-date {
  display: none; 
}
.avia_start_animation .avia-icon-circles-inner {
  transition: all 0.2s cubic-bezier(0.175,0.885,0.320,1.275);
}
@media only screen and (max-width: 2500px) {
  #top #header.av_header_transparency .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header.av_header_transparency .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}
.page-id-691 #after_section_2 {
  display: none; 
}

I think I have a lot of extra unneeded CSS code. Could you take a look and fix this for me?

.phone-info {
font-size: 30px;
}

#header_meta a, #header_meta span {
font-size:17px !important;
}

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
.responsive #top #main {
/* Margin top value should be equal to header height*/
margin-top: 130px;
}
.responsive #top #wrap_all #header {
position: fixed;
}
}

@media only screen and (max-width: 1200px) {
.av-main-nav > li.menu-item { display: none; }
.av-main-nav > li.menu-item-avia-special { display: block; }
}

.phone-info {
font-size: 18px;
}

@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
font-size: 30px !important;
}

.responsive #top .slideshow_caption .avia-caption-content {
font-size: 8px !important;
line-height: 10px;
}

.avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
height: 20vh !important;
}
}

@media only screen and (max-width: 767px) {
#top #wrap_all #main .avia-section {
background-image: none !important;
}
}

.html_elegant-blog #top .post-entry .post-meta-infos,
.html_elegant-blog .avia-content-slider .slide-meta,
#top .news-time {
display: none;
}

html, body {
background-color: #04aef7 !important;
}

.page-id-2413 .slideshow_align_caption {
vertical-align: top;
}

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.avia-slideshow li {
visibility: visible !important;
opacity: 1 !important;
}
}