![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 24, 2024 at 8:36 am #1445472
I think these two might be related, but lets start with the full width issue.
I have had to make some pages on the Gutenberg block editor with Spectra addon as the avia Advanced Layout Builder button suddently went missing. As you can see in this image, full width is not full with. The background colours do not stretch to the top or the bottom.
Enfold General layout is set to stretched.
Ive also tried adding this code in quick CSS and theme customise CSS based on an old post, but it did not help.
`#top .fullsize .template-blog .post .entry-content-wrapper > *,
#top .fullsize .template-blog .post .entry-content-wrapper {
max-width: 100%;
}May 24, 2024 at 9:50 am #1445480Hey Jambar,
Please post admin WordPress login details in private, and let us know how to reproduce the problem. I couldn’t find the element in the screenshots on your front page.
Best regards,
RikardMay 24, 2024 at 10:20 am #1445486here 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.
May 24, 2024 at 12:11 pm #1445515Hi,
Thanks for that. Let’s focus on why the layout builder button is not showing. What happens if you temporarily deactivate all plugins?
Best regards,
RikardMay 24, 2024 at 4:02 pm #1445554it’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.
May 24, 2024 at 8:31 pm #1445628Hi,
Thanks for the update. Why do you need to use the Gutenberg builder for your layout? Why not use the built in Enfold Layout Builder?
Best regards,
RikardMay 25, 2024 at 1:44 am #1445717I 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.
May 25, 2024 at 10:32 am #1445872Hi,
You can try this in Quick CSS:
.page-id-2429 #main .container { width: 100%; max-width: 100%; padding: 0; }
This will apply to the pricing page only.
Best regards,
RikardMay 25, 2024 at 12:51 pm #1445929ok 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’
May 25, 2024 at 8:49 pm #1446092Hi,
For your pricing page try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.page-id-2429 .template-page.content.av-content-full.av-main-page { padding: 0; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeMay 27, 2024 at 10:14 am #1446693Hi 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 rowsChatgpt 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.
May 27, 2024 at 1:10 pm #1446707Hi,
It looks like your Chatgpt 4o css is not working well, please remove it all and once the table is back to normal explain what is not right.
The break points that you talk about should be the default break points.Best regards,
MikeMay 27, 2024 at 1:38 pm #1446709ok 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
May 27, 2024 at 7:52 pm #1446746Hi,
You have set the container width to 85% in the theme options, that is why the columns expand that way. If you want a fixed width for only that section, then we could try giving you some CSS for that too.
Best regards,
RikardMay 28, 2024 at 2:12 am #1446772Hi 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.
May 28, 2024 at 9:00 am #1446809 -
This reply was modified 3 months, 2 weeks ago by
-
AuthorPosts
- You must be logged in to reply to this topic.