Gutenberg / Spectra Full Width Not Working. Avia Advanced Layout Button Missing

here you are. the page im referring to is pricing from the menu bar.

I’ve edited the page a little now, but you can see on the left and right the background doesn’t go full width. It also doesnt go ‘fullwidth’ on the top or bottom either.

• This reply was modified 3 months, 2 weeks ago by Jambar.

it’s the Gutenberg plugin. As soon as I turn that on, the Avia button disappears.

I tried every other plugin (except Spectra, as that is an extension of Gutenberg) and they have no affect on the button.

Edit – actually, i just turned on spectra and the avia button is still there and it seems editor works fine without gutenberg plugin.

But the pages created with the block editor still do not go ‘full width’, so that issue is still there.

• This reply was modified 3 months, 2 weeks ago by Jambar.
• This reply was modified 3 months, 2 weeks ago by Jambar.
• This reply was modified 3 months, 2 weeks ago by Jambar.

I don’t normally. My colleague started this website and built the first pages in Gutenberg with spectra because they, not me, felt it was easier. When i saw what they were doing i changed all future pages to be on the normal layout builder.

But now i am stuck because full width isn’t working on those pages and i don’t really want to rebuild both pages from scratch.

ok so that worked on the pricing page for the width.

the height top and bottom are also not ‘full height’.

I also tried the same thing for the ‘sign up page’ .page-id-2447, but while that did extend the width of the page significantly, it still had about 10 px on the left and right ‘not full width’

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 3 months, 1 week ago by Jambar.

ok done.

the columns change width as soon as the browser width starts to reduce.

I’ve added a comparison website where you can see the column width stays fixed until the breaks

Hi again,

I’m not sure I understand. I changed the container width back to 100% in the theme options, and the pricing page columns are still ‘responsive’ to small changes in browser width on my laptop and then correctly break down to a single column when the browser becomes thin enough.

If I toggle off ‘responsive’ in the same theme options, the 3 columns do not adjust to small changes in browser width and do not break into a single column when the browser is thin enough because they are now not responsive.

What I’m trying to achieve is a mixture.

The columns should not be responsive until the browser break size is thin enough, when they break into 1 column. Exactly like the other comparison website i showed.

1) is there a way we can do this over the whole website?
2) is there a way that this can be achieved just for this pricing table?

Thanks for the help so far.